在Web前端开发中，样式表文件是不可或缺的重要组成部分之一。当我们使用Webpack打包工具进行项目构建时，通常需要将CSS样式表从JavaScript代码中分离出来并单独生成一个CSS文件，以便于后续的缓存和加速优化。而mini-css-extract-plugin就是一个可以将CSS从JS中提取出来的npm包。
安装与配置
首先需要安装该包，使用以下命令即可：
npm install mini-css-extract-plugin --save-dev
然后在Webpack的配置文件中引入该插件，并配置相应选项：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-----
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- --------------------------
--
-
-在这个示例中，我们将MiniCssExtractPlugin作为Webpack的一个插件使用，并在rules中添加了一个针对CSS文件的规则，将其从JavaScript中提取出来，并使用MiniCssExtractPlugin.loader来加载提取后的CSS文件。
同时，在plugins中我们配置了生成的CSS文件的文件名格式，其中[name]表示输出文件的名称，[contenthash]表示使用内容哈希值作为文件名的一部分。
示例
下面是一个简单的示例，假设我们有一个index.html文件和一个app.js文件，其中app.js中引入了两个CSS文件：
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ------------------------------------- ----- ---------------- ------------------------- ----- ---------------- -------------------------- ------- ------ --------- ----------- ------- ---------------------- ------- -------
// app.js import './main.css'; import './other.css';
我们可以使用以下Webpack配置来提取CSS文件：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
----- --------------
------ -----------
------- -
--------- -----------
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- --------------------------
--
-
-在这个示例中，我们使用MiniCssExtractPlugin.loader将提取后的CSS文件加载到HTML文件中，并且生成的CSS文件名包含内容哈希值以保证唯一性。运行Webpack打包命令后，我们的输出目录中会生成一个main.eaaffa1d.css和一个other.abcd1234.css文件，同时HTML文件中也会自动引入这两个CSS文件。
总结
以上就是npm包mini-css-extract-plugin的使用教程。通过使用该插件，我们可以将CSS文件从JavaScript代码中分离出来并单独生成一个CSS文件，以便于后续的缓存和加速优化。同时，在Webpack中使用MiniCssExtractPlugin非常简单，只需要添加对应的Loader和Plugin即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43300