webpack 知识点

webpack 中文网

1、什么是 webpack ？

1. webpack 是一个打包模块化 JS 的工具，在 webpack 中，一切皆是文件。
2. webpack 通过 loader 转换文件
3. webpack 通过 plugin 注入钩子
4. 并且最终输出由多个模块组成的文件， webpack 专注于构建模块化项目。

2、常见 loader

1. file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
2. 和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
3. image-loader：加载并且压缩图片文件
4. babel-loader：把 ES6 转换成 ES5
5. css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 如 import 
6. style-loader：能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容。

3、常见 plugin

1. define-plugin：定义环境变量
2. commons-chunk-plugin：提取公共代码
3. uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

4、loader 和 plugin 不同

1. loader是使wenbpack拥有加载和解析非js文件的能力
2. plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

5、如何利用webpack来优化前端性能

1. 压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码
2.  删除死代码（tree shaking），css需要使用Purify-CSS
3. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替

6. 什么是bundle,什么是chunk，什么是module?

1. bundle:有webpack打包出来的文件
2. chunk：webpack在进行模块的依赖分析的时候，代码分割出来的代码块
3. module:开发中的单个模块

7.如何提高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来剔除多余代码