development 模式:
在开发环境中，我们希望能够更加方便的进行开发以及调试代码，当项目运行起来后，可以自动打开浏览器，webpack 能够通过监听代码的修改，自动重新编译打包，并且实时刷新浏览器。
production 模式:
在生产模式中，我们希望能够得到一个更小的 bundle，更轻量的 source >map，从而改善加载时间。
如果没有设置 mode ，webpack 默认以 production 模式进行打包。

在之前的 demo 中，webpack 打包后会在根目录下自动创建 dist 目录，并且把生成的文件输出到 dist 下。
当配置的输出包名含有 [hash] 时，hash值会随着文件内容的改变而改变。
因此，我们需要在下一次 webpack 打包输出之前，把 dist 目录清空。
clean-webpack-plugin 插件就能帮你做到。

通过 url-loader 和 file-loader 配合可以实现：
当字体大小 < 某个限定值（limit）时，转换为 base64 字符传，并打包进 bundle 中。
当字体大小 > 某个限定值时，将图片放到指定目录下，并通过 url 引用。

通过 url-loader 和 file-loader 配合可以实现：
当图片大小 < 某个限定值（limit）时，转换为 base64 字符传，并打包进 bundle 中。
当图片大小 > 某个限定值时，将图片放到指定目录下，并通过 url 引用。

虽然webpack4不支持 ExtractTextWebpackPlugin 插件，但是我们可以使用 mini-css-extract-plugin 来实现把 css 提取为单独的文件。

postcss: postcss 有一个插件体系，postcss 可以通过选择相应的插件对 css 进行转换和处理。
比如可以通过 Autoprefixer 插件来处理 css 的前缀，以实现浏览器的兼容性。
postcss-loader: webpack 通过 postcss-loader 来调用 postcss。

webpack 处理 scss

在 webpack 中，所有类型的文件都是模块，比如 js、css、图片、字体、json（可以说是万物皆模块）。
但是，在普通的 js 代码中，我们直接 import (或require) 一张图片或css是会报错的。
但在 webpack 构建的项目中，归功于 loader（加载器），webpack 能够把 js 的模块化推广至其他类型文件，比如：import('xxx.css');

借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析，webpack 能够利用 Tree Shaking 进行按需加载，移除掉没有被引用的模块，从而减少包的大小，缩小应用的加载时间，从而提高性能体验。

在单页面或多页面应用中，通过代码分离的方式，能够优化性能。
比如把异步加载的代码分离成一个单独的chunk，等到需要调用的时候再按需加载（比如click时），这样可以减少首屏的代码体积，从而提高首屏的加载速度。