將CSS提取為獨(dú)立的文件的插件刷袍，對每個(gè)包含css的js文件都會(huì)創(chuàng)建一個(gè)CSS文件锻煌，支持按需加載css和sourceMap
只能用在webpack4中妓布，對比另一個(gè)插件 extract-text-webpack-plugin有點(diǎn):
- 異步加載
- 不重復(fù)編譯，性能更好
- 更容易使用
- 只針對CSS
目前缺失功能宋梧，HMR匣沼。
安裝：
yarn add -D mini-css-extract-plugin
使用:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// 類似 webpackOptions.output里面的配置 可以忽略
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 這里可以指定一個(gè) publicPath
// 默認(rèn)使用 webpackOptions.output中的publicPath
publicPath: '../'
},
},
'css-loader',
],
}
]
}
}
高級(jí)配置示例:
這個(gè)插件應(yīng)該只用在 production 配置中，并且在loaders鏈中不使用 style-loader, 特別是在開發(fā)中使用HMR捂龄，因?yàn)檫@個(gè)插件暫時(shí)不支持HMR
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
}
]
}
}
production 階段進(jìn)行壓縮
webpack5可能會(huì)內(nèi)置CSS 壓縮器释涛，webpack4需要自己使用壓縮器，可以使用 optimize-css-assets-webpack-plugin 插件倦沧。 設(shè)置 optimization.minimizer 覆蓋webpack默認(rèn)提供的唇撬，確保也指定一個(gè)JS壓縮器
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourcMap: true
}),
new OptimizeCSSAssetsPlugin({}),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
}
}
將所有的CSS提取到一個(gè)文件中
和 extract-text-webpack-plugin 類似，可以使用 optimization.splitChunks.cacheGroups 將css提取到一個(gè)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'
]
}
]
}
}
根據(jù)entry提取CSS
可以根據(jù)webpack 的entry name來提取CSS展融，這對你動(dòng)態(tài)引入路由窖认，卻想依據(jù)entry保存打包的CSS的情況十分有用。這也解決了ExtractTextPlugin中CSS重復(fù)的問題
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"
]
}
]
}
}
