MiniCssExtractPlugin less不能热更新

emer 发布于 2022-3-7 18:11 1568 次阅读

原本打包过后是css-in-js,配置完MiniCssExtractPlugin后,可以将css单独打包出来

配置

1,安装npm install --save-dev mini-css-extract-plugin

2,将style-loader替换成MiniCssExtractPlugin.loader (style.loader,支持HMR,但MiniCssExtractPlugin目前正在支持(还没))

3,安装npm install --save-dev optimize-css-assets-webpack-plugin (压缩输出的css文件)

4,安装npm install --save-dev terser-webpack-plugin (因为需要配置minimizer,所以默认的js压缩被覆盖,在旧版本中是使用的 UglifyjsWebpackPlugin来压缩的,但是在最新版本中更换成了TerserJSPlugin)

5,在optimization.minimizer注册OptimizeCSSAssetsPlugin与TerserJSPlugin,注意,当运行mode是development时minimizer并不运行,所以,不会压缩js和css

6,安装npm install css-hot-loader --save-dev (来支持MiniCssExtractPlugin的HMR功能)

7,将css-hot-loader配置于MiniCssExtractPlugin.loader前面,注意,生成的css命名,不能让根据内容的改变而改变,不然找不到变化的css文件,热更新无效,如[name].[hash].css,就会让热更新失效,建议为[name].css

module:{

rules:[

         {
    
                    test: /\.less$/, use: ['css-hot-loader',MiniCssExtractPlugin.loader, "css-loader", {loader: "less-loader", options: {javascriptEnabled: true}}]
    
                },

]

}