extract-text-webpack-plugin 的使用及安装

extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法:

npm i extract-text-webpack-plugin -D

首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在webpack.config.js中引入该插件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

该插件有三个参数意义分别如下

use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径

webpack打包报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

**webpack打包环境优化的一个点：将css样式代码抽离出来。 **

若不抽离，可以在bundle.js中发现css代码被转化成节点样式插入到了body下；这个过程是：style-loader将外部css文件注入到html中，css内容使用css-loader进行解析，转化成js文件；因为webpack只能识别js文件。

css分离：

使用extract-text-webpack-plugin插件，该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。

**优点 **

非js文件单独打包，通过js将文件写入，可以用来单独做浏览器缓存。
目前工程中大部分用到的还是webpack3+；实际中，在不指定版本的情况下，npm默认安装的4.0.0版本，这时使用上述插件会报错：
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

**原因： **

extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。

**解决办法： **

npm install –save-dev extract-text-webpack-plugin@next
会下载到+ extract-text-webpack-plugin@4.0.0-beta.0
然后在打包就正常了