webpack4 extract-text-webpack-plugin踩坑

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'
   })
 ]

你可能感兴趣的:(前端晋级--webpack)