首页 > 建站教程 > 前端框架 >  webpack5学习笔记:CSS抽离、MiniCssExtractPlugin正文

webpack5学习笔记:CSS抽离、MiniCssExtractPlugin

# 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)

}

```