webpack性能优化，自定义配置

以下是自己的总结：

1，使用静态资源路径

在publicPath中写上自己的CDN的路径，设置之后会在所有的资源前加上这个路径前缀，这样在页面在请求资源的时候，就会去CDN上查找请求资源

2，缩小文件搜索范围

在loader的rules中设置include，设置之后，就只在设置的路径中区搜索，exclude也可以设置，但是是排除在外，不搜索的路径，一般推荐使用include

3，resolve.extensions

在webpack中，一般只认识 .js .json扩展名的文件，如果在extension中添加的别的扩展名，如下:

设置之后，在文件引入的时候就不用写后缀名，webpack会自动补全，但是这样会消耗性能，所以一般不推荐添加其他的后缀名

4，alias（别名）

设置别名之后，webpack在查找引入文件的时候就不用一层一层去查找，会直接在别名对应的路径中查找，减少查找时间

5，抽离css文件压缩

使用 MinCssExtractPlugin 来抽离Css
下载： npm install mini-css-extract-plugin -D
引入： const MiniCssExtractPlugin = require（ mini-css-extract-plugin ）
使用：


抽离之后可以做压缩
使用optimize-css-assets-webpack-plugin 和cssnano（压缩规范）
引入之后配置:

6，压缩HTML

下载资源，配置：

7，js 摇树

注意：
1，js摇树只支持 import 方法引入的，不支持common.js规范（require方法引入）
2，只有mode是production才会生效，development是不生效的

配置：

这个配置是有副作用的，开启之后会对less，css，png文件都摇树，所以需要另外配置来排除这些类型的文件

在package.json文件中 配置