对于 webpack 配置中 ExtractTextPlugin 插件认知

对于 webpack 配置中 ExtractTextPlugin 插件认知

extract-text-webpack-plugin：该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
如果不使用该插件，打包之后会将css代码以字符串的形式混入打包后的index.bundle.js文件中，并且index.bundle.js文件会比平时大一些

此时如果有html引用该js：

浏览器打开index.html，就会发现css以style的形式被插到了head。

ExtractTextWebpackPlugin 插件属性

new ExtractTextPlugin (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文件的文件路径

注意！！

1. 如果当前项目是webpack3.x版本，使用 extract-text-webpack-plugin；
2. 如果当前项目是webpack4.x版本（但已有extract-text-webpack-plugin配置），可以继续用 extract-text-webpack-plugin，但必须用对应的beta版本，且这个 beta 版本不支持生成hash；
3. 如果当前项目是 webpack4.x 版本且是新项目，使用 mini-css-extract-plugin。

————————————————
版权声明：本文为优快云博主「讨厌走开啦」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/lqlqlq007/article/details/83865176

【tip】在vue项目中，想要在打包时候将.vue组件内html、css、js 文件实现分离：

使用 vue-split-css-html-js-files

这里有说明文档哦 ~ https://juejin.im/post/5cdffa2af265da1b8e706f23
详细使用方法和内部实现原理可以自行查看，感谢大神分享 ~

参考

webpack ExtractTextPlugin 插件的认识
webpack4.x抽取css【extract-text-webpack-plugin与mini-css-extract-plugin】