介绍
对css代码进行压缩,css内容不会在放入html里。当一个入口引入多个css文件时,将会把文件合并。
打包使用
基础配置
安装:npm install --save-dev mini-css-extract-plugin
webpack.config.js基础配置,若css里有body不会合并,配置了多少个body css都会存在。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},};
压缩配置
webpack.config.js压缩配置,若有多个地方配置body css合并成一个body。
安装:npm install --save-dev optimize-css-assets-webpack-plugin
webpack.config.js配置
// 引入插件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader'],
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css', // 直接引入的文件会使用此规则,例:main.js
chunkFilename: '[id].[contenthash].css'// 间接引入的文件会使用此规格,例:mian.js里引入的文件
})
],
optimization: { //使用插件,只有打包为生产环境时才会压缩合并多个body的css
minimizer: [new OptimizeCSSAssetsPlugin({})]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};
打包成一个文件
使用optimization.splitChunks.cacheGroups将css打包到一个文件里去
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},};Extr
基于入口打包
避免复制css的问题,我们可以根据entry入口进行打包。
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
entry: {
foo: path.resolve(__dirname, 'src/foo'),
bar: path.resolve(__dirname, 'src/bar'),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
name: 'foo',
test: (m, c, entry = 'foo') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
barStyles: {
name: 'bar',
test: (m, c, entry = 'bar') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};