怎么对css文件进行代码分割?
如果我们想让引入的css文件,在打包时,单独生成一个css文件到dist目录的话,可以这样做
-
先下载一个插件
npm install --save-dev mini-css-extract-plugin
-
在webpack.config.js中进行配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ], }, };
-
这时候你会发现,引入的css文件,不会生成到js中,而是单独生成了css文件
如果想要对打包的css进行压缩怎么处理呢?
下载插件
npm install optimize-css-assets-webpack-plugin -D
在webpack.config.js中进行配置
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
如何将所有CSS提取到一个文件中呢?
在webpack.config.js中进行配置
可以忽略上面两个配置,但是插件一定要下载
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
具体高级用法可以参考webpack官网:https://webpack.js.org/plugins/mini-css-extract-plugin/