二、webpack开发环境配置总结

less/css 文件的完整处理过程： 

1.通过less-loader编译为css     

2.通过post-css做css代码的兼容  

   3.通过css-loader将css代码编译到js文件中

4.通过style-loader【创建 style 标签， 将 js 中的样式资源插入进行， 添加到 head 中生效
】将css代码插入在html标签中 

 5.或通过MiniCssExtractPlugin插件和MiniCssExtractPlugin.loader将css文件提取出来，以link标签的形式引入在index.html中  

 6.通过OptimizeCssAssetsWebpackPlugin插件进行代码的压缩

js文件的完整处理过程 

1.通过eslint-webpack-plugin插件进行代码格式的检验   

2.通过babel进行兼容性处理   

注意：eslint应在babel之前进行处理。如果babel先对js代码进行了转换，那可能在通过eslint检查的时候会报错。所以应该先通过eslint进行语法检查，然后再通过babel做语法兼容。

3.通过mode="production"对代码进行压缩

图片文件的完整处理过程：

 1.对于在css 中通过background-image引入的图片，需要使用url-loader进行处理 

2.对于在html中直接引入的img，直接使用html-loader处理

html文件的完整处理过程： 

1、通过HtmlWebpackPlugin插件实现引入index.html模版   2、打包  3、代码压缩

其他文件的处理：

使用file-loader进行处理