css載入器檔案通常和extract-text-webpack-plugin一塊使用,我們可以在原始檔src目錄下寫scss檔案，然後通過webpack編譯成css檔案到輸出目錄public，這個目錄就是我們**需要引用的目錄.
1var webpack = require('webpack');
2var htmlwebpackplugin = require('html-webpack-plugin');
3var extracttextwebpackplugin = require('extract-text-webpack-plugin');
4var extractcss = new extracttextwebpackplugin("css/[name].css");//
這裡的引數是配置編譯後的css路徑和檔名,相對於output裡的path選項
5var path = require('path');
6 module.exports =,
10entry:,
14output:,
18module:21]
22},
23sassloader:,
26plugins:[
27new htmlwebpackplugin(),
28extractcss29]
30 }
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檔案，則可以不用佔位符，可以指定任意名稱。
關於webpack編譯scss檔案
css載入器檔案通常和extract text webpack plugin一塊使用,我們可以在原始檔src目錄下寫scss檔案，然後通過webpack編譯成css檔案到輸出目錄public，這個目錄就是我們 需要引用的目錄.1 var webpack require webpack 2var ht...
webpack之使用less和scss
前言 本文以sass為例，其實，應用sass或者less，是指先將檔案交給sass load或者less loader處理成css檔案，然後再交給css loader style loader進行處理。如果你的專案中使用了scss。安裝sass loader node sass 我們目前的專案目錄 ...
webpack 編譯過程
webpack 的作用是將源 編譯 構建 打包 成最終 整個過程大致分為三個步驟 初始化編譯輸出 此階段，webpack會將cli引數 配置檔案 預設配置進行融合，形成乙個最終的配置物件。對配置的處理過程是依託乙個第三方庫yargs完成的 此階段相對比較簡單，主要是為接下來的編譯階段做必要的準備 目...