webpack打包工具

 

概念：

它是基于模块化打包的工具：自动化处理模块，,webpack把⼀切当成模块，当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图(dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个 bundle。

webpack构建流程：

1、初始化参数

2、开始编译

3、确定入口

4、编译模块

5、完成模块编译

6、输出资源

7、输出完成

常见的Loader加载器：

file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件 url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去 source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试 image-loader：加载并且压缩图⽚⽂件babel-loader：把 ES6 转换成 ES5 css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性 style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。eslint-loader：通过 ESLint 检查 JavaScript 代码

常见的Plugin插件：

define-plugin：定义环境变量 html-webpack-plugin：简化html⽂件创建 uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码webpack-parallel-uglify-plugin: 多核压缩,提⾼压缩速度webpack-bundle-analyzer: 可视化webpack输出⽂件的体积mini-css-extract-plugin: CSS提取到单独的⽂件中,⽀持按需加载

bundle，chunk，module是什么

bundle：是由webpack打包出来的⽂件 chunk：代码块，⼀个chunk由多个模块组合⽽成，⽤于代码的合并和分割 module：是开发中的单个模块，在webpack的世界，⼀切皆模块，⼀个模块对应⼀个⽂件，webpack会从配置的entry中递归开始找出所有依赖的模块

 

如何提高webpack的打包速度？

happypack: 利⽤进程并⾏编译loader,利⽤缓存来使得 rebuild 更快,遗憾的是作者表示已经不会继续开发此项⽬,类似的替代者是thread-loader 外部扩展(externals): 将不怎么需要更新的第三⽅库脱离webpack打包，不被打⼊bundle中，从⽽减少打包时间,⽐如jQuery⽤script标签引⼊ dll: 采⽤webpack的 DllPlugin 和 DllReferencePlugin 引⼊dll，让⼀些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间 利⽤缓存: webpack.cache 、babel-loader.cacheDirectory、 HappyPack.cache 都可以利⽤缓存提⾼rebuild效率 缩⼩⽂件搜索范围: ⽐如babel-loader插件,如果你的⽂件仅存在于src中,那么可以 include: path.resolve( dirname, ‘src’) ,当然绝⼤多数情况下这种操作的提升有限,除⾮不⼩⼼build了node_modules⽂件 实战⽂章推荐使⽤webpack4提升180%编译速度 Tool

 

如何提⾼webpack的构建速度？

1、多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码

2、通过 externals 配置来提取常⽤库

3、利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm 包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。

4、使⽤ Happypack 实现多线程加速编译

5、使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度

6、使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码