webpack 配置分离css插件

以css配置示例,less与sass同理

1. 使用旧版的ExtractTextPlugin插件

安装

npm install extract-text-webpack-plugin@next --save-dev

在webpack.config.js中配置

const extractTextPlugin=require(\'extract-text-webpack-plugin\')

module.exports={
    //...code
    module:{
       rules:[{
            test:/\.css$/,
            use:extractTextPlugin.extract({
                fallback:"style-loader",
                use:[\'css-loader\'],
                publicPath:"../"
            })
        }]
    },
    plugins:[
        new extractTextPlugin("./css/[name].css")//输出路径
    ]
}

如果还使用了根据css自动加前缀loader

const extractTextPlugin=require(\'extract-text-webpack-plugin\')

module.exports={
    //...code
    module:{
       rules:[{
            test:/\.css$/,
            use:extractTextPlugin.extract({
                fallback: "style-loader",
                use: [\'css-loader\', {
                        loader: \'postcss-loader\',
                        options: {
                            plugins: [require(\'autoprefixer\')]
                        }
                    }]
                publicPath: \'../\'
            })
        }]
    },
    plugins:[
        new extractTextPlugin("./css/[name].css")//输出路径
    ]
}

使用方法

配置完成后运行webpack打包即可

---

2.使用新版mini-css-extract-plugin 插件

安装

npm install mini-css-extract-plugin --save-dev

在webpack.config.js中配置

const miniCssPlugin=require(\'mini-css-extract-plugin\');
module.exports={
    module:{
        rules:[
            {
                test:/\.css$/,
                use: [{
                    loader: miniCssPlugin.loader,
                    options: {
                        publicPath: \'../\'
                    }
                }, \'css-loader\']
            }
        ]
    },
    plugins:[
        new miniCssPlugin({
            filename:\'./css/[name].css\'
        })
    ]
}