Webpack 将css提取成单独文件分离

如果采用默认配置导入css的话 打包后是这样的

css样式会被直接写入到html中去，可能会带来不必要的影响，这时候就需要把css单独分离出来

首先要安装
mini-css-extract-plugin
postcss-loader
postcss-preset-env

npm i mini-css-extract-plugin postcss-loader postcss-preset-env -D

然后配置webpack.config.js

const{resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
//引入mini-css-extract-plugin
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>{
                            require('postcss-preset-env')
                        }
                    }
                }
            ]
            },
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>{
                            require('postcss-preset-env')
                        }
                    }
                },
                'less-loader'
            ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
        //输出文件夹和文件名
            filename:'css/built.css'
        })
    ],
    mode:'production'
}

执行的过程，use数组是从下往上执行的

{
                test:/\.less$/,
                use:[
                /*4.最后再通过MiniCssExtractPlugin.loader
                把css提取成单独的文件
                */
                    MiniCssExtractPlugin.loader,
                    //3.css-loader会把css加载到中
                    'css-loader',
                    //2.postcss-loader会对css进行兼容性处理
                    { 
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>{
                            require('postcss-preset-env')
                        }
                    }
                },
                //1.首先执行less-loader，将less编译成css
                'less-loader'
            ]
            }

最后输出一个单独的css文件