webpack 插件之 extract-text-webpack-plugin

4,267 阅读1分钟

extract-text-webpack-plugin 的作用是分离项目中的css文件,常用配置代码如下

{
  test: /\.css$/,
  use:extractTextPlugin.extract({
  fallback:'style-loader',
  use: 'css-loader'
  })
{

plugins: {
  new extractTextPlugin('css/[name].css')
}

解释一下fallback 的意思: 一般对css文件打包用到loader如下:

use: ['style-loader','css-loader']

css-loader 的作用是处理css文件中 @import,url之类的语句,style-loader则是将css文件内容放在style标签内并插入head中,既然使用了extract-text-webpack-plugin,按理说就没必要配置style-loader了,实际上你不配置也可以,可是如果你不想分离css文件,可设置disable:ture来关闭该插件,这时fallback:'style-loader'就派上用场了