# MiniCssExtractPlugin
## 解释
MiniCssExtractPlugin可以将css单独抽离到一个css文件。
## 使用
1. 安装插件
`npm install mini-css-extract-plugin -D`
2. 在webpack.config.js的打包环境下配置：
```
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'production', // 可以在任意地方，用 process.env.NODE_ENV 获取
externals: {
// key 为不需要打包的第三方库的名字，value 为这个库的全局对象名称
lodash: '_',
dayjs: 'dayjs'
},
plugins: [
new CleanWebpackPlugin({}),
new MiniCssExtractPlugin({
filename: './css/[name].[hash:8].css'
})
]
}
```
3. style-loader在生产环境去除，使用上面的插件来解析，所以在公共的webpack.config.js中配置，全部配置如下：
```
const resolveApp = require('./paths')
const productionConfig = require('./webpack.prod')
const developmentConfig = require('./webpack.dev')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { merge } = require('webpack-merge')
const commonConfig = (isProduction) => {
return {
entry: {
main: './src/main.js',
index: './src/index.js',
},
output: {
filename: './js/[name].bundle.js', // 这里的 name 对应 entry 配置的 key
chunkFilename: './js/[name].[hash:6].chunk.js',
path: resolveApp('./build'),
},
resolve: {
extensions: ['.vue', '.jsx', '.ts'],
alias: {
'@': resolveApp('./src')
}
},
// 优化
optimization: {
// 对代码进行压缩相关设置
minimizer: [
// 去除打包时产生的txt说明文件
new TerserPlugin({
extractComments: false
})
],
// 代码去重
splitChunks: {
// chunks 默认是 ‘async’，异步，表示只有代码异步加载库时，才会进行分离
chunks: 'all'
},
// true/multiple 抽离
// single 不抽离
runtimeChunk: {
name: 'runtime-5imoban'
}
},
module: {
rules: [
{
test: /\.css$/i,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader'
],
},
{
test: /\.jsx?$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.vue$/i,
use: 'vue-loader'
}
],
},
plugins: [
new HtmlWebpackPlugin({
title: '页面标题',
template: './public/index.html'
}),
new VueLoaderPlugin()
]
}
}
module.exports = function(env){
const isProduction = env.production
// 正常情况下 process.env.NODE_ENV 能取到值，但是在 babel.config.js 中取不到，在这里赋值，给 babel.config.js 中使用
process.env.NODE_ENV = isProduction ? 'production' : 'development'
return isProduction ? merge(commonConfig(isProduction), productionConfig) : merge(commonConfig(isProduction), developmentConfig)
}
```