1.webpack的基本概念

1.1 webpack是什么?

webpack是一个现代js应用程序的静态模块打包器(module bundler)，一种前端资源构建工具。

  • 什么是前端资源构建工具?在浏览器中是不认识sass、less、ts等web资源和js高级语法，只有通过webpack这样的构建工具来将它们一一编译成浏览器能够读取的js文件。
  • 什么是静态资源打包器?在webpack处理应用程序时，它会递归构建一个依赖关系图，将应用程序需要的所有模块打包成一个或多个bundle。

1.2 webpack可以用来做什么?

webpack作为前端工程师最常用的前端资源构建工具，能够解决很多在开发中的遇到的痛点和难点。

  • 可以不依赖后端，解决调用后端接口时的跨域问题
  • 在代码改动后自动刷新浏览器，有缓存时也无需清除缓存
  • 可以方便解决css和js新特性在各浏览器上的兼容性问题，提高自己的开发效率
  • 无需使用额外的打包平台和编写打包脚本，也无需单独对js、css等进行打包压缩

当然，webpack的强大不止这些，它有很多简单方便的配置能够提升你的开发效率。

2. webpack的核心配置

常用的核心配置如下：

  • 入口 entry
  • 输出 output
  • 加载器 loader
  • 插件 plugin
  • 模式 mode
  • 其它配置等

当然，以上列举的是常用的配置，其它的需求可以查找官方文档进行阅读：[https://webpack.docschina.org/concepts/]

2.1 入口 entry

入口(entry)毫无疑问指的是webpack以哪个或哪些文件作为打包的起点，以哪个模块来构建内部依赖图。webpack会根据依赖图去分析各个模块之间的依赖关系，从而进行打包。

  1. //单文件入口，string形式：打包形成一个chunk，输出一个bundle文件，当然在实际开发中的灵活性不大 
  2. entry:"./src/index.js"
  4. //多文件入口，array形式：所有文件最终形成一个chunck，输出一个bundle文件 
  5. entry:["./src/index.js","./src/main.js"] 
  7. //多文件入口，object形式：多个入口文件就形成多个chunk，最终输出多个bundle文件，而chunk的名称就是对象的key值.虽然这种方式比较繁琐，但是其扩展性比较强，配置可以重复使用，也可以配合其它配置组合使用。 
  8. entry:{ 
  9. index:"./src/index.js", 
  10. main:"./src/main.js"
  11. } 

当然在描述入口的对象的时候，还有许多其它配置属性，具体可以查看文档。

  • dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
  • filename: 指定要输出的文件名称。
  • import: 启动时需加载的模块。
  • library: 指定 library 选项，为当前 entry 构建一个 library。
  • runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
  • publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。

2.2 输出 output

输出(output)显而易见就是告诉webpack在哪里输出打包后的资源bundles，以及如何命名这些输出文件。当然主要文件默认为"./dist/main.js"，其它文件则放在"./dist"文件夹中。

  1. // 打包出口  
  2. output:{ 
  3. // 输出文件夹路径 
  4. path:path.resolve(__dirname,"dist"), 
  5. // 文件名 
  6. // filename:"bundle.js"
  7. // 如果多个入口起点，应当使用占位符确保每个文件具有唯一名称 
  8. filename:"[name].js", 
  9. // 所有资源引入公共路径前缀，用于生产环境需谨慎 
  10. publicPath:"",//编译时，不知道其输出文件的地址，则将其置空，在运行时通过入口起点文件的__webpack_public_path__进行动态配置。 
  11. chunkFilename: "[contenthash:10].chunk.js", 
  12. clean: true, //打包前清空输出目录，相当于clean-webpack-plugin插件的作用。 
  13. /* 当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到library */ 
  14. library: { 
  15. name: "[name]",//整个库向外暴露的变量名 
  16. type: "window"//库暴露的方式 
  17. } 
  18. } 

切记：即使可以存在多个 entry 起点，但只能指定一个 output 配置。

2.3 加载器 loader

正如你所知道的，webpack只能解析js和json文件，这是其天生自带的能力。而loader的能力就是让webpack可以去处理其它类型的文件，将其转为webpack能够解析的模块文件js或json，以提供给应用程序使用，生成到依赖图中。

  1. // 加载器 
  2. loader:{ 
  3. // 匹配文件类型，服从正则表达式语法 
  4. test:/\.css/, 
  5. // 定义在转换时，使用到哪些loader，自下而上、自右至左进行处理 
  6. use:[ 
  7. "style-loader",//创建style标签，将js文件中的样式资源提取出来，添加到index.html文件的head标签中 
  8. "css-loader",//将css文件转变成commonjs格式加载到js文件中 
  9. { 
  10. loader:"postcss-loader",//css的兼容性处理，切记：需要预先在package.json文件中配置browserlist 
  11. options:{ 
  12. postcssOptions:{ 
  13. ident:"postcss", 
  14. // postcss-preset-env插件：帮postcss找到package.json中的browserslist配置，根据配置加载指定的兼容性样式 
  15. plugins:[require("postcss-preser-env")()] 
  16. } 
  17. } 
  18. } 
  19. ] 
  20. }, 
  21. {  
  22. test: /\.js$/,  
  23. // 注意需要在package.json配置browserslist，否则babel-loader不生效  
  24. // js兼容处理 babel  
  25. loader: "babel-loader",  
  26. // 规则只使用一个loader时推荐写法  
  27. options: {  
  28. presets: [  
  29. [  
  30. "@babel/preset-env", 
  31. // 预设：指示babel做怎么样的兼容处理  
  32. {  
  33. useBuiltIns: "usage",  
  34. //按需加载  
  35. corejs: {  
  36. version: "3",  
  37. },  
  38. targets: "defaults",  
  39. }  
  40. ]  
  41. ]  
  42. }  
  43. } 

2.4 插件 plugin

插件plugin：插件其实就是辅助loader去执行范围更广的人物，从打包优化、文件压缩、资源管理以及重新注入环境变量。

  1. // CleanWebpackPlugin帮助你在打包时自动清除dist文件，学习时使用比较方便 
  2. // const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //从webpack5开始，webpack内置了该功能，只要在ouput中配置clear为true即可 
  4. // HtmlWebpackPlugin帮助你创建html文件，并自动引入打包输出的bundles文件。支持html压缩。 
  5. const HtmlWebpackPlugin = require("html-webpack-plugin"); 
  7. // 该插件将CSS提取到单独的文件中。它会为每个chunk创造一个css文件。需配合loader一起使用 
  8. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 
  10. // 该插件将在Webpack构建过程中搜索CSS资源，并优化\最小化CSS 
  11. const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); 
  13. // vue-loader V15版本以上，需要引入VueLoaderPlugin插件，它的作用是将你定义过的js、css等规则应用到vue文件中去。 
  14. const { VueLoaderPlugin } = require(\"vue-loader\") 
  16. module.exports = { 
  17. module: { 
  18. rules: [ 
  19. { 
  20. test: /\.vue$/, 
  21. loader: "vue-loader"
  22. }, 
  23. { 
  24. test: /\.css$/, 
  25. use: [ 
  26. // MiniCssExtractPlugin.loader的作用就是把css-loader处理好的样式资源（js文件内），单独提取出来 成为css样式文件 
  27. MiniCssExtractPlugin.loader,//生产环境下使用，开发环境还是推荐使用style-loader 
  28. "css-loader", 
  29. ], 
  30. }, 
  31. ], 
  32. }, 
  33. plugins: [ 
  34. new HtmlWebpackPlugin({ 
  35. template:"index.html"
  36. }), 
  37. new MiniCssExtractPlugin({ 
  38. filename: "css/built.css", 
  39. }), 
  40. new OptimizeCssAssetsWebpackPlugin(), 
  41. new VueLoaderPlugin(), 
  42. ] 
  43. } 

2.5 模式

模式mode用于告知webpack需要使用对应环境模式下的配置，可以是production、development或者none，当然默认是production。

使用mode模式有两种方式，可以是在配置对象中设置mode选项。

  1. module.exports = { 
  2. mode:"development"
  3. } 

也可以是在package.json中的cli进行配置:

  1. webpack --mode=development

官方文档中是这样写的：

选项描述
development会将 DefinePlugin中 process.env.NODE_ENV的值设置为 development. 为模块和 chunk 启用有效的名。
production会将 DefinePlugin中 process.env.NODE_ENV的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin和 TerserPlugin。
none不使用任何默认优化选项

如果要根据 webpack.config.js 中的 mode 变量更改打包行为，则必须将配置导出为函数，而不是导出对象：

  1. ar config = { 
  2. entry: \"./app.js\", 
  3. //... 
  4. }; 
  6. module.exports = (env, argv) => { 
  7. if (argv.mode === \"development\") { 
  8. config.devtool = \"source-map\"; 
  9. } 
  11. if (argv.mode === \"production\") { 
  12. //... 
  13. } 
  15. returnconfig; 
  16. }; 

其它常用配置：

  1. module.exports = { 
  2. // 解析模块的规则： 
  3. resolve: { 
  4. // 配置 解析模块路径别名：可简写路径。 
  5. alias: { 
  6. "@": path.resolve(__dirname, "src") 
  7. }, 
  8. // 配置 省略文件路径的后缀名。默认省略js和json。也是webpack默认认识的两种文件类型 
  9. extensions: [".js", ".json", ".css"], // 新加css文件 
  10. // 告诉webpack解析模块是去找哪个目录 
  11. // 该配置明确告诉webpack，直接去上一层找node_modules。 
  12. modules: [path.resolve(__dirname, "../node_modules")], 
  13. }, 
  14. // devServer（开发环境下配置）： 
  15. devServer: { 
  16. // 运行代码的目录 
  17. contentBase: path.resolve(__dirname, "build"), 
  18. // 为每个静态文件开启gzip压缩 
  19. compress: true, 
  20. host: "localhost", 
  21. port: 5000, 
  22. open: true, // 自动打开浏览器 
  23. hot: true, //开启HMR功能 
  24. // 设置代理 
  25. proxy: { 
  26. // 一旦devServer(5000端口)接收到/api/xxx的请求，就会用devServer起的服务把请求转发到另外一个服务器（3000） 
  27. // 以此来解决开发中的跨域问题 
  28. api: { 
  29. target: "htttp://localhost:3000", 
  30. // 发送请求时，请求路径重写：将/api/xxx  --> /xxx （去掉/api）
  31. pathRewrite: { 
  32. "^api": "", 
  33. }, 
  34. }, 
  35. }, 
  36. }, 
  38. // optimization（生产环境下配置） 
  39. optimization: { 
  40. // 提取公共代码 
  41. splitChunks: { 
  42. chunks: "all", 
  43. }, 
  44. minimizer: [ 
  45. // 配置生产环境的压缩方案：js和css 
  46. new TerserWebpackPlugin({ 
  47. // 多进程打包 
  48. parallel: true, 
  49. terserOptions: { 
  50. // 启动source-map 
  51. sourceMap: true, 
  52. }, 
  53. }), 
  54. ], 
  55. }, 
  56. }; 

3参考文章

webpack官方文档

Webpack5.0学习总结-基础篇

标签： 一网打尽 Webpack 工程 打包