webpack将所有的资源都当成了模块，统一打包到一个bundle.js文件中。
由于项目需要，我们须将入口文件中引用到的所有样式文件（.css/.less），单独进行打包，即项目的样式文件将不再内嵌到bundle.js中，而是会放到一个单独的css文件中。
如果项目中样式文件较大，该做法会加快页面加载速度，因为css和bundle是并行加载的。
| 优点 | 缺点 |
|---|---|
| CSS sourceMap | 增加编译时间 |
| CSS请求并行，单独缓存 | 没有热替换 |
| 更少的代码和DOM操作 | ...... |
- 安装
npm install --save-dev extract-text-webpack-plugin
# 对于 webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# 对于 webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1
对于 webpack v1, 请看 分支为 webpack-1 的 README 文档。
- 用法
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
- 配置选项详解
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 }：匹配特定条件。一般是提供一个正则表达式或正则表达式的数组，但这不是强制的。
{ include: Condition }：匹配特定条件。一般是提供一个字符串或者字符串数组，但这不是强制的。
{ exclude: Condition }：排除特定条件。一般是提供一个字符串或字符串数组，但这不是强制的。
把style-loader传给了fallback，这个配置的基本含义就是，extract默认行为先使用css-loader编译css，如果一切顺利的话，结束之后把css导出到规定的文件去。但是如果编译过程中出现了错误，则继续使用vue-style-loader处理css。
use:指需要什么样的loader去编译文件
