webpack---编译sass并分割css为独立文件,通过extract-text-webpack-plugin分割文件

通过ExtractTextWebpackPlugin可以把webpack打包生成的style样式分割输出css文件
main.scss:

body{
    font-size:14px;
    div{
        background:#f05;
        span{
            padding:10px;
        }
    }
}

index.js:

require('./main.scss')

安装依赖laoder：

cnpm install --save node-sass;
cnpm install --save sass-loader;
cnpm install --save css-loader;
cnpm install --save extract-text-webpack-plugin;

webpack.config.js

const ExtractTextPlugin=require('extract-text-webpack-plugin');
const path=require('path');

module.exports={
    entry:path.resolve(__dirname,'index.js'),
    output:{
        filename:'[name].js',
        path:path.join(__dirname,'/')
    },
    module:{
        rules:[
            {
                test:/\.scss$/,
                use:ExtractTextPlugin.extract({
                    fallback:'css-loader',
                    use:['css-loader','sass-loader']    
                })
            }
        ]
    },
    plugins:[new ExtractTextPlugin('main.css'),]
}

生成结果main.css:

body {
  font-size: 14px; }
  body div {
    background: #f05; }
    body div span {
      padding: 10px; }

---

main.css文件是由插件extract-text-webpack-plugin完成分割；

- ExtractTextPlugin()

    new ExtractTextPlugin();//形参为分割css文件的信息

-extract

ExtarctTextPlugin.extract(loader);//形参为loader

ExtarctTextPlugin.extract(obj);//形参为对象：use、fallback、publicPath