webpack配置

初始插件

每一个webpack项目，都需要很多插件配合工作，完成项目，记录一下这些插件，下次直接来查阅使用

webpack-cil：

webpack的命令工具

webpack-bundle-analyzer：

webpack打包性能优化，图形化插件

browserSync：

浏览器同步调试工具，和热跟新有点像

clean-webpack-plugin：

打包之前删除build,或者dist文件夹的插件

html-webpack-plugin：

处理html文件的插件，会创造一个html文件，并且在改文件内引入打包好的css,js文件

mini-css-extract-plugin：

将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap

optimize-css-assets-webpack-plugin：

用于优化和压缩css资源

terser-webpack-plugin：

用来压缩js文件

webpack-dev-middleware:

webpack-dev-middleware,作用就是，生成一个与webpack的compiler绑定的中间件，然后在express启动的服务app中调用这个中间件。
这个中间件的作用呢，简单总结为以下三点：通过watch mode，监听资源的变更，然后自动打包（如何实现，见下文详解);快速编译，走内存；返回中间件，支持express的use格式。特别注明：webpack明明可以用watch mode，可以实现一样的效果，但是为什么还需要这个中间件呢？
答案就是，第二点所提到的，采用了内存方式。如果，只依赖webpack的watch mode来监听文件变更，自动打包，每次变更，都将新文件打包到本地，就会很慢。

webpack-dev-server:

提供开发服务器，使得开发者调试

webpack-hot-middleware:

webpack-hot-middleware 是和webpack-dev-middleware配套使用的。webpack-dev-middleware是一个express中间件，实现的效果两个，一个是在fs基于内存，提高了编译读取速度；第二点是，通过watch文件的变化，动态编译。但是，这两点并没有实现浏览器端的加载，也就是，只是在我们的命令行可以看到效果，但是并不能在浏览器动态刷新。那么webpack-hot-middleware就是完成的