"extract-text-webpack-plugin”使用的坑

在js中require(css)后,样式嵌入在js中,没有独立的css文件

说明:webpack的默认设置中,如果没有引入特殊的第三方插件,在js中require的css文件是会自动写入到相应打包出的js中的,这样一来有一些缺点:


  • js是阻塞加载的,样式会出现很慢
  • 没有单独的css文件,缓存也不便,而且不符合开发习惯

解决:需要引入一个第三方插件extract-text-webpack-plugin,具体如下:

//头部引入css打包插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");

//声明对应的loaders
loaders: [{
test: /\.css$/,
//请注意loader里的写法,有一些低版本的例子中是过时的写法
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}],

plugins: [
...
//这样会定义,所有js文件中通过require引入的css都会被打包成相应文件名字的css
new ExtractTextPlugin("[name].css"),
]

当缺少new ExtractTextPlugin("[name].css")这句时,就会报错:

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to webpack-contrib/extract-text-webpack-plugin for the usage example


因此解决该报错的方法就是在plugins中添加相应配置!


参考链接:jianshu.com/p/02380e5de

编辑于 2017-09-25