After bundling, it was originally CSS-in-JS. After configuring MiniCssExtractPlugin, CSS can be extracted separately.
Configuration
1. Install npm install --save-dev mini-css-extract-plugin
2. Replace style-loader with MiniCssExtractPlugin.loader (style-loader supports HMR, but MiniCssExtractPlugin is currently supporting it (not yet)).
3. Install npm install --save-dev optimize-css-assets-webpack-plugin (to compress the output CSS files).
4. Install npm install --save-dev terser-webpack-plugin (because you need to configure minimizer, so the default JS compression is overridden. In older versions, UglifyJSWebpackPlugin was used for compression, but in the latest version it has been replaced with TerserJSPlugin).
5. Register OptimizeCSSAssetsPlugin and TerserJSPlugin in optimization.minimizer. Note that when mode is development, minimizer does not run, so JS and CSS will not be compressed.
6. Install npm install css-hot-loader --save-dev (to support MiniCssExtractPlugin's HMR functionality).
7. Configure css-hot-loader before MiniCssExtractPlugin.loader. Note that the generated CSS filename should not change based on content changes; otherwise, the changed CSS file cannot be found and hot reload will be invalid. For example, [name].[hash].css will cause hot reload to fail. It is recommended to use [name].css.
module:{
rules:[
]
}
暂无评论。