webpack plug disposed separated css

In css configuration example, less empathy and sass

1. Use an older version of the plug-ExtractTextPlugin

installation

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

In the configuration 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")//输出路径
    ]
}

If you used in accordance with the automatic loader prefix css

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")//输出路径
    ]
}

Instructions

Once configured webpack running to packed

---

2. Use the new mini-css-extract-plugin plugin

installation

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

In the configuration 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'
        })
    ]
}