webpack(7)_CSS_使用extract-text-webpack-plugin提取css

最新推荐文章于 2024-08-15 09:19:44 发布

ruiurrui

最新推荐文章于 2024-08-15 09:19:44 发布

阅读量6.3k

点赞数 4

分类专栏： webpack 文章标签：学习笔记

本文链接：https://blog.csdn.net/u010982507/article/details/81337529

版权

本文详细介绍了如何使用extract-text-webpack-plugin从webpack项目中提取CSS，包括插件的安装、配置、属性设置及多实例应用，确保CSS样式正确加载，避免页面样式混乱。

摘要由CSDN通过智能技术生成

本文主要讲解使用extract-text-webpack-plugin提取css，主要从以下几个方面：

项目准备
extract-text-webpack-plugin的安装
在webpack.config.js中配置
extract-text-webpack-plugin插件的属性配置
extract-text-webpack-plugin多实例应用

项目准备

新建目录test
mkdir test
初始化package.json
npm init，关于项目的一些描述，一路回车键。
新建dist目录和src目录，并在src目录下新建index.js，在src/css目录下新建base.css
在项目根目录下新建webpack.config.js，下图是整个项目结构
安装style-loader和css-loader
如果有不懂style-loader和css-loader的，请查看文章：https://blog.csdn.net/u010982507/article/details/81277151

extract-text-webpack-plugin的安装

作用
extract-text-webpack-plugin插件主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
官网介绍：https://webpack.docschina.org/plugins/extract-text-webpack-plugin/
安装webpack
npm install webpack --save-dev
注：直接安装的话，会安装当前最新的版本。我当前安装的是"webpack": "^4.16.4"。
安装extract-text-webpack-plugin
npm install extract-text-webpack-plugin --save-dev
注：如果直接安装的话，会安装"extract-text-webpack-plugin": "^3.0.2"，执行webpack打包命令时会报错

node:8596) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Chunk.js:824
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Chunk.js:824:9)
    at D:\webwork\webpack\007_wp_css_postcss\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
    at Array.forEach (<anonymous>)
    at D:\webwork\webpack\007_wp_css_postcss\node_modules\extract-text-