webpack4.x抽取css【extract-text-webpack-plugin与mini-css-extract-plugin】

￡神魔★判官ぃ 2022-04-18 04:55 252阅读 0赞

本文主要记录笔者在使用webpack抽取css时遇到的一些问题。

参考文档：  
[https://www.npmjs.com/package/extract-text-webpack-plugin][https_www.npmjs.com_package_extract-text-webpack-plugin]  
[https://www.npmjs.com/package/mini-css-extract-plugin][https_www.npmjs.com_package_mini-css-extract-plugin]

项目的初始诉求是利用webpack来管理css（合并），并增加hash（性能优化），当前项目使用webpack版本为4.6.0。

开始选择的插件是extract-text-webpack-plugin，安装命令如下：

sudo npm install extract-text-webpack-plugin

此时webpack配置文件如下：

但是构建时会报如下错误：

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

检查以后发现原因是extract-text-webpack-plugin默认安装的版本是3.0.2，还不支持webpack的4.x版本。其实在初始安装时就有告警提示，只是被忽略了：

![在这里插入图片描述][20181108175958103.png]

接下来看一下extract-text-webpack-plugin有没有方案来解决这个版本配套问题，百度以后了解到有extract-text-webpack-plugin有一个4.0的beta版本支持webpack4.x，把前面安装的extract-text-webpack-plugin的3.0.2版本卸载， 重新安装这个beta版本，安装命令如下：

sudo npm install --save-dev extract-text-webpack-plugin@next

此时可以正常构建了，也完成了第一个诉求——合并css，接下来是为css生成hash。

webpack配置文件的最后一部分更新为：

new extractTextPlugin({
        filename: 'focus.index.[contenthash:8].css'
    })

但是构建时会报如下错误：

Error: Path variable [contenthash:8] not implemented in this context: focus.index.[contenthash:8].css

报错截图如下：

![在这里插入图片描述][20181108181319583.png]

要用extract-text-webpack-plugin加hash看来是无解了，只能看看还有没有其他插件可以替代extract-text-webpack-plugin，又百度了一发，了解到可以用mini-css-extract-plugin替代extract-text-webpack-plugin，安装命令如下：

sudo npm install mini-css-extract-plugin

webpack配置文件更新如下（之前使用extract-text-webpack-plugin的部分已经注释）：

最后终于构建成功了：

![在这里插入图片描述][20181108182738189.png]

最后总结一下：

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。

[https_www.npmjs.com_package_extract-text-webpack-plugin]: https://www.npmjs.com/package/extract-text-webpack-plugin
[https_www.npmjs.com_package_mini-css-extract-plugin]: https://www.npmjs.com/package/mini-css-extract-plugin
[20181108175958103.png]: /images/20220418/9c4c573e1a2c42eeb4b0f0d9f184b74c.png
[20181108181319583.png]: /images/20220418/900b038281864926810b8e5cb8796a39.png
[20181108182738189.png]: /images/20220418/68638acd8fdd489f819ea771988bcda7.png