MiniCssExtractPlugin less不能热更新
首页 > >    作者:lininn   2022年3月7日 18:11 星期一   热度:673°   百度已收录  
时间:2022-3-7 18:11   热度:673° 

原本打包过后是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}}]
        },


]

}

二维码加载中...
本文作者:lininn      文章标题: MiniCssExtractPlugin less不能热更新
本文地址:?post=549
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn