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);//形参为loaderExtarctTextPlugin.extract(obj);//形参为对象：use、fallback、publicPath