前言
在前端开发中，CSS 是不可或缺的一部分，但是在项目中，CSS 文件往往会变得非常庞大，这不仅会影响页面加载速度，还会影响开发效率。为了解决这个问题，我们可以使用 webpack 中的 MiniCssExtractPlugin 插件来提取 CSS 文件，减少打包后的体积。
本文将介绍如何使用 webpack4 中的 MiniCssExtractPlugin 插件来提取 CSS 文件，并提供示例代码。
MiniCssExtractPlugin 简介
MiniCssExtractPlugin 是 webpack 中一个用于将 CSS 文件提取为独立文件的插件。与之前使用的 style-loader 不同，MiniCssExtractPlugin 可以将 CSS 文件从 JavaScript 文件中分离出来，减少文件体积，提高页面加载速度。
安装 MiniCssExtractPlugin
在使用 MiniCssExtractPlugin 之前，需要先安装该插件。可以通过 npm 安装，命令如下：
npm install --save-dev mini-css-extract-plugin
配置 webpack.config.js
在 webpack.config.js 中，需要添加 MiniCssExtractPlugin 的配置项，示例代码如下：
-- -------------------- ---- ------- ----- -------------------- - ----------------------------------- -------------- - - -- --- ------- - ------ - -- --- - ----- --------- ---- - ---------------------------- ------------ - - - -- -------- - -- --- --- ---------------------- --------- ------------- -------------- ---------- -- - --展开代码
其中，filename 和 chunkFilename 分别指定输出的 CSS 文件名和 chunk 文件名。
示例代码
下面是一个简单的示例代码，用于提取项目中的 CSS 文件。
index.js
import './style.css'; console.log('Hello World!');
style.css
body { background-color: #f5f5f5; font-family: Arial, sans-serif; } h1 { color: #333; }
webpack.config.js
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------------------- - ----------------------------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- ------- - ------ - - ----- --------- ---- - ---------------------------- ------------ - - - -- -------- - --- ---------------------- --------- ------------- -------------- ---------- -- - --展开代码
package.json
-- -------------------- ---- ------- - ------- --------------- ---------- -------- -------------- --- ------- ----------- ---------- - -------- -------- ------ ----------- -- ------------------ - ------------- --------- -------------------------- --------- ---------- ---------- -------------- --------- - -展开代码
在终端中执行以下命令，即可将项目中的 CSS 文件提取出来：
npm run build总结
使用 MiniCssExtractPlugin 插件可以有效地将 CSS 文件从 JavaScript 文件中提取出来，减少打包后的体积，提高页面加载速度。本文介绍了如何在 webpack4 中使用 MiniCssExtractPlugin 插件来提取 CSS 文件，并提供了示例代码。希望本文能够对大家在前端开发中使用 webpack 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c436b0add4f0e0ffeab75a
