extract-text-webpack-plugin是webpack中提取分离css的。
如果不去分离css的内容都被打包到bundle.js里面了。
无论修改了js部分的代码,css模块也会被重新打包,被当成css模块也有内容修改,或者只修改了css模块,js模块是没有变化的,但是他们都是在一个bundle中,所以都会被认为有修改。
悲剧的是webpack4 直接安装extract-text-webpack-plugin始终报错
webpack4 安装extract-text-webpack-plugin必须安装下一代版本
折腾了半天终于在国外网站上找到答案cnpm install extract-text-webpack-plugin @next -save
用法说明:
ExtractTextPlugin基本参数说明:
filename:生成文件的文件名,可以包含 [name], [id], [contenthash]
allChunks:当为false的时候,只会提取初始化的时候引入的css,当allChunks属性为true时,会把异步引入的css也提取出来。
ExtractTextPlugin.extract基本参数说明:
use:指需要什么样的loader去编译文件
fallback: 这里表示不提取的时候,使用什么样的配置来处理css
publicfile:用来覆盖项目路径,生成该css文件的文件路径
var extracss=require('extract-text-webpack-plugin');
use:extracss.extract({
fallback:{
loader:'style-loader',
options:{
//insert:"body",
}
},
use: [
{
loader:'css-loader' ,
options:{
//minimize:true,
modules:{
localIdentName:'[path]_[name]_[local]_[hash:4]',
//import
//minimize
}
}
}
]
})
plugins:[
new extracss({
filename:'[name].min.css'
})
]