一、ExtractTextWebpackPlugin插件作用
为什么要使用ExtractTextWebpackPlugin？不用行不行？
关于第二个问题，我的回答是of course。如果不用的话，会产生一些css和js混乱的问题，让我们一起将在不用ExtractTextWebpackPlugin的情景重现一下。
在webpack的配置过程中，要通过npm安装style-loader、css-loader等相关的一些loader来处理css文件，然后在modules模块中做好css和js相关配置之后运行webpack命令进行打包。
然后查看打包结果index.bundle.js，可以发现，css被打包到了js文件中，以字符串的形式存在，并且整个index.bundle.js比平常大了不少。就像这样：
此时如果有html引用该js：
浏览器打开index.html，就会发现css以style的形式被插到了head：
关于第一个问题是：如果使用ExtractTextWebpackPlugin插件，修改一下配置：
打包并查看dist，可以发现，index.bundle.js文件恢复了正常，并多出来一个style.css文件。如果配合HtmlWebpackPlugin插件则自动插入index.html中。
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
二、ExtractTextWebpackPlugin插件属性
newExtractTextPlugin(options:filename|object):
1.id:此为插件的唯一标识，默认为自动生成。
2.filename:定义文件的名称。如果有多个入口文件时，应该定义为：[name].css。
3.allChunks:当使用 `CommonsChunkPlugin` 并且在公共 chunk 中有提取的 chunk（来自`ExtractTextPlugin.extract`）时，`allChunks` **必须设置为 `true`。
4.ignoreOrder:禁用顺序检查 (这对 CSS 模块很有用！)，默认 `false`。
5.disable:禁用插件
ExtractTextPlugin.extract(options:loader|object)
1.options.use:指需要什么样的loader去编译文件
2.options.fallback:编译后用什么loader来提取css文件
3.options.publicfile:用来覆盖项目路径,生成该css文件的文件路径
更多知识点请访问：https://segmentfault.com/a/1190000011884725
https://webpack.js.org/plugins/extract-text-webpack-plugin/
