webpack配置-相关属性说明

拼搏现实的明天。 2023-02-25 03:40 300阅读 0赞

> 前言：webpack是我们现代前端最常见的模块打包工具，webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。特性：打包 CommonJs 和 AMD 模块（以及绑定），可创建单个或多个按需加载的块，以减少初始加载时间，在编译期间会解决依赖关系，减少了运行时的大小，加载器可以在编译时预处理文件，如 coffee-script 到 javascript。

*小编也是从闲余时间零开始搭建webpack，作为演示讲解一些常用的功能块和属性方法*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]  
**[了解Bable js编译器][Bable js]**

**[webpack进阶-自定义插件原理][webpack_-]**

**[体积减少80%！释放webpack tree-shaking的真正潜力][webpack_-]**

**package.json文件描述**

> 相关属性依赖版本号，并非是最新版本，实际开发请重新安装依赖

{ 
      //从name到private都是package的配置信息，也就是我们在脚手架搭建中输入的项目描述
      "name": "shop",//项目名称：不能以.(点)或者_（下划线）开头，不能包含大写字母，具有明确的的含义与现有项目名字不重复
      "version": "1.0.0",//项目版本号：遵循“大版本.次要版本.小版本”
      "description": "webpack project",//项目描述
      "author": "njt",//作者名字
      "private": true,//是否私有
      "scripts": {  //scripts中的子项即是我们在控制台运行的脚本的缩写
       //①webpack-dev-server:启动了http服务器，实现实时编译;
       //inline模式会在webpack.config.js入口配置中新增webpack-dev-server/client?http://localhost:8080/的入口,使得我们访问路径为localhost:8080/index.html（相应的还有另外一种模式Iframe）;
       //progress:显示打包的进度
        "start": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  
        "start": "npm run dev",//与npm run dev相同，直接运行开发环境
        "build": "node build/build.js"//使用node运行build文件
        "analyz": "NODE_ENV=production npm_config_report=true npm run build", // 查看打包体积大小分布
      },
      "dependencies": {  //②dependencies(项目依赖库):在安装时使用--save则写入到dependencies
        "vue": "^2.5.2",//vue.js
        "vue-router": "^3.0.1"//vue的路由插件
      },
      //和devDependencies（开发依赖库）：在安装时使用--save-dev将写入到devDependencies
      "devDependencies": { 
        "autoprefixer": "^7.1.2",//autoprefixer作为postcss插件用来解析CSS补充前缀，例如 display: flex会补充为display:-webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex。
        //babel:以下几个babel开头的都是针对es6解析的插件。用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本
        "babel-core": "^6.22.1",//babel的核心，把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。
        "babel-helper-vue-jsx-merge-props": "^2.0.3",//预制babel-template函数，提供给vue,jsx等使用
        "babel-loader": "^7.1.1",//使项目运行使用Babel和webpack来传输js文件，使用babel-core提供的api进行转译
        "babel-plugin-syntax-jsx": "^6.18.0",//支持jsx
        "babel-plugin-transform-runtime": "^6.22.0",//避免编译输出中的重复，直接编译到build环境中
        "babel-plugin-transform-vue-jsx": "^3.5.0",//babel转译过程中使用到的插件，避免重复
        "babel-preset-env": "^1.3.2",//转为es5，transform阶段使用到的插件之一
        "babel-preset-stage-2": "^6.22.0",//ECMAScript第二阶段的规范
        "chalk": "^2.0.1",//用来在命令行输出不同颜色文字
        "copy-webpack-plugin": "^4.0.1",//拷贝资源和文件
        "css-loader": "^0.28.0",//webpack先用css-loader加载器去解析后缀为css的文件，再使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里
        "mini-css-extract-plugin": "^0.9.0",//将一个以上的包里面的css文本提取到单独文件中
        "file-loader": "^1.1.4",//③打包压缩文件，与url-loader用法类似
        "friendly-errors-webpack-plugin": "^1.6.1",//识别某些类别的WebPACK错误和清理，聚合和优先排序，以提供更好的开发经验
        "html-webpack-plugin": "^2.30.1",//简化了HTML文件的创建，引入了外部资源，创建html的入口文件，可通过此项进行多页面的配置
        "node-notifier": "^5.1.2",//支持使用node发送跨平台的本地通知
        "ora": "^1.2.0",//加载（loading）的插件
        "portfinder": "^1.0.13",//查看进程端口
        "postcss-import": "^11.0.0",//可以消耗本地文件、节点模块或web_modules
        "postcss-loader": "^2.0.8",//用来兼容css的插件
        "postcss-url": "^7.2.1",//URL上重新定位、内联或复制
        "webpack-parallel-uglify-plugin": "^1.1.2",//压缩js文件
        "url-loader": "^0.5.8",//压缩文件，可将图片转化为base64
        "vue-loader": "^13.3.0",//VUE单文件组件的WebPACK加载器
        "vue-style-loader": "^3.0.1",//类似于样式加载程序，您可以在CSS加载器之后将其链接，以将CSS动态地注入到文档中作为样式标签
        "vue-template-compiler": "^2.5.2",//这个包可以用来预编译VUE模板到渲染函数，以避免运行时编译开销和CSP限制
        "webpack": "^4.43.0",//打包工具
        "webpack-cli": "^3.3.12",
        "webpack-bundle-analyzer": "^2.9.0",//可视化webpack输出文件的大小
        "webpack-dev-server": "^3.11.0",//提供一个提供实时重载的开发服务器
        "webpack-merge": "^4.2.2"//它将数组和合并对象创建一个新对象。如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值封装在函数中
      },
      "engines": {  //engines是引擎，指定node和npm版本
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [ //限制了浏览器或者客户端需要什么版本才可运行
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }

**1. 代码示例 webpack.base.js**公共编译模块：入口、出口、编译模块配置、代码块分割、性能警告、插件等

> 补充：MiniCssExtractPlugin插件，提取js文件中的css文件，以link链接在index.html文件中引入，注意：当style-loader 和 css-loader方式在生产环境构建不生效时，原因：1.是否开启 tree shaking, 将package.json文件中的"sideEffects"去掉或者改为自己匹配的文件；2. 查看rules规则配置的loader是否正确，MiniCssExtractPlugin插件不支持style-loader。3.配置完MiniCssExtractPlugin插件会生成多个bundle.css包，可以通过配置cacheGroups单独打包成一个文件。

**2. 代码示例 webpack.dev.js**开发环境编译模块：mode、devServer、plugins等

*  **FriendlyErrorsWebpackPlugin** 去除终端webpack多余编译信息使界面可观  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70 1]

**3. 代码示例 webpack.prod.js**生产环境编译模块：mode、devtool、plugins等

> **4.补充知识点 Chunk理解**  
> Chunk是指webpack里的一个代码块。对于module，Webpack可以看做是模块打包机，我们编写的任何文件，对于Webpack来说，都是一个个模块。而Chunk是webpack打包过程中，一堆Module的集合。Chunk和Bundle，Bundle就是我们最终输出的一个或多个打包文件。产生Chunk的三种途径： entry入口、异步加载模块、代码分割。

> **5.webpack热更新原理：**
> 
> 1.  Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)
> 2.  页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端
> 3.  客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash
> 4.  修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端
> 5.  客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档
> 6.  hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。

> **5.webpack编译原理**
> 
> 1.  初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
> 2.  开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
> 3.  确定入口：根据配置中的 entry 找出所有的入口文件；
> 4.  编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
> 5.  完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
> 6.  输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
> 7.  输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

> 本篇文章只是对webpack常用到的属性做了相关注解，实际的开发中相关文章也有说明，常去敲一敲也会遇到一些不常见的问题，对成长也是一种帮助吧！常看看官网其余属性和插件也有说明。  
> **最后推荐一篇文章**[webpack是怎么实现动态导入的][webpack]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]: /images/20230209/2096d5b53afc4bb99f3dfe3b13b7f842.png
[Bable js]: https://juejin.im/post/5ddff3abe51d4502d56bd143
[webpack_-]: https://juejin.im/post/5beb8875e51d455e5c4dd83f#heading-16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70 1]: /images/20230209/001027b3f5564c3a9d4b2ec29e84c415.png
[webpack]: https://juejin.im/post/5d26e7d1518825290726f67a