webpack4取消了UglifyjsWebpackPlugin，使用minimize进行压缩，取消了CommonsChunkPlugin，使用splitChunks进行分包。
2.webpack 中Plugin和loader的作用和区别？ 有哪些常用的Loader和Plugin? 他们是解决什么问题的？
loader：模块转换器，webpack 将一切文件视为模块，但 webpack 只能解析 JavaScript 文件，而 loader 作用是让 webpack 拥有了加载 和 解析非 JavaScript 文件的能力。
plugin：在 webpack 构建流程中的特定时机注入扩展逻辑，让它具有更多的灵活性。在 webpack 运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。
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 代码
vue-loader：加载 Vue.js 单文件组件
Plugin:
commons-chunk-plugin：提取公共代码
terser-webpack-plugin : 支持压缩 ES6 (Webpack4)
ignore-plugin：忽略部分文件
html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
mini-css-extract-plugin : 分离样式文件，CSS 提取为独立文件，支持按需加载
extract-text-webpack-plugin: webpack3.x 分离样式文件
optimize-css-assets-webpack-plugin：css 代码优化
clean-webpack-plugin : 删除打包文件
happypack：实现多线程加速编译
3. 如何利用 webpack 来优化前端性能？
用 webpack 优化前端性能是指优化 webpack 的输出结果，让打包的最终结果在浏览器运行快速高效。
1.压缩代码。删除多余的代码、注释、简化代码的写法等等方式。
用 UglifyJsPlugin和ParallelUglifyPlugin 压缩JS文件
用 mini-css-extract-plugin 压缩 CSS
利用 CDN 加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用 webpack 对于output 参数和各 loader 的 publicPath 参数来修改资源路径
删除死代码。JS 用 Tree Shaking，CSS 需要使用 Purify-CSS
提取公共代码。用 CommonsChunkPlugin 插件
4. 分别介绍 bundle，chunk，module 是什么
bundle：是由 webpack 打包出来的文件，
chunk：代码块，一个 chunk 由多个模块组合而成，用于代码的合并和分割。
module：是开发中的单个模块，在 webpack 的世界，一切皆模块，一个模块对应一个文件，webpack 会从配置的 entry 中递归开始找出所有依赖的模块。
5. 说一下 webpack 的热更新原理吧
热更新又称热替换（Hot Module Replacement），缩写为 HMR，基于 webpack-dev-server。
当你对代码修改并保存后，将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。
6. 如何提高 webpack 的构建速度？
- 多入口情况下，使用 CommonsChunkPlugin 来提取公共代码
- 通过externals配置来提取常用库
- 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。
- 使用 Happypack 实现多线程加速编译
- 使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度
- 使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码
7. Hash 、 Chunkhash和Contenthash的作用是？
Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
Chunkhash：和 Webpack 打包的 chunk 有关，不同的 entry 会生出不同的 chunkhash
Contenthash：根据文件内容来定义 hash，文件内容不变，则 contenthash 不变
