關於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文件，則可以不用占位符，可以指定任意名稱。