webpack將所有的資源都當(dāng)成了模塊棺耍，統(tǒng)一打包到一個(gè)bundle.js文件中贡未。
由于項(xiàng)目需要，我們須將入口文件中引用到的所有樣式文件（.css/.less）蒙袍，單獨(dú)進(jìn)行打包俊卤，即項(xiàng)目的樣式文件將不再內(nèi)嵌到bundle.js中，而是會(huì)放到一個(gè)單獨(dú)的css文件中害幅。
如果項(xiàng)目中樣式文件較大消恍，該做法會(huì)加快頁(yè)面加載速度，因?yàn)閏ss和bundle是并行加載的以现。
| 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|
| CSS sourceMap | 增加編譯時(shí)間 |
| CSS請(qǐng)求并行狠怨，單獨(dú)緩存 | 沒(méi)有熱替換 |
| 更少的代碼和DOM操作 | ...... |
- 安裝
npm install --save-dev extract-text-webpack-plugin
# 對(duì)于 webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# 對(duì)于 webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1
對(duì)于 webpack v1, 請(qǐng)看 分支為 webpack-1 的 README 文檔佩抹。
- 用法
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
- 配置選項(xiàng)詳解
exclude: [/node_modules/, path.resolve(__dirname, '../src/components')],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}
]
})
{ test: Condition }：匹配特定條件。一般是提供一個(gè)正則表達(dá)式或正則表達(dá)式的數(shù)組取董，但這不是強(qiáng)制的棍苹。
{ include: Condition }：匹配特定條件。一般是提供一個(gè)字符串或者字符串?dāng)?shù)組茵汰，但這不是強(qiáng)制的枢里。
{ exclude: Condition }：排除特定條件。一般是提供一個(gè)字符串或字符串?dāng)?shù)組蹂午，但這不是強(qiáng)制的栏豺。
把style-loader傳給了fallback，這個(gè)配置的基本含義就是豆胸，extract默認(rèn)行為先使用css-loader編譯css奥洼，如果一切順利的話，結(jié)束之后把css導(dǎo)出到規(guī)定的文件去晚胡。但是如果編譯過(guò)程中出現(xiàn)了錯(cuò)誤灵奖，則繼續(xù)使用vue-style-loader處理css。
use:指需要什么樣的loader去編譯文件
