关于webpack编译scss文件

css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件，然后通过webpack编译成css文件到输出目录public，这个目录就是我们网站需要引用的目录.

 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
 var extractCss = new ExtractTextWebpackPlugin("css/[name].css");//这里的参数是配置编译后的css路径和文件名,相对于output里的path选项
 var path = require('path');
 module.exports = {
     resolve:{
         extentions:["",".scss"]
     },
     entry:{
         main:__dirname + '/app/main.js',
         index:__dirname + '/app/index.js'
     },
     output:{
         path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
         filename:'/js/[name].js', //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建
     },
     module:{
         loaders:[
             {test:/\.scss$/,loader:extractCss.extract(['css','sass'])}
         ]
     },
     sassLoader:{
         includePaths:[path.resolve(__dirname,'./app/css')]
     },
     plugins:[
         new HtmlWebpackPlugin({title:'custom title2',template:__dirname + '/public/tempIndex.html'}),
         extractCss
     ]
 }

Note:new ExtractTextWebpackPlugin("css/[name].css")，如果用了[name]占位符的形式,只编译引用了scss文件的入口文件，且生成的css文件名与入口文件对应。

如果有多个入口文件都引入了同一个scss文件，且entry属性配置了vendor对象，则生成一个vendor.css文件,这个vendor.css文件对应的源码是入口文件共同引用的scss文件(webpack.optimize.CommonsChunkPlugin不仅能提取公共的js文件还能提取公共的css文件)，如果没有配置vendor则分别生成多个与入口文件同名的css文件。

如果多个入口文件引用的是不同的scss文件，不管entry属性有没有配置vendor对象，都生成多个与入口文件对应的同名css文件。

通常情况下都会使用[name]占位符，如果只有一个入口节点引用了scss文件且只引用了一个scss文件，则可以不用占位符，可以指定任意名称。