前言
在前端开发中，使用 webpack 进行打包是非常常见的，而 webpack 可以通过插件来扩展其功能。其中，msnt-extract-css-webpack-plugin 就是一款非常实用的插件，它能够将 CSS 代码从 JS 中分离出来，并生成单独的 CSS 文件，以减小 JS 文件的大小。本文将详细介绍如何使用该插件，并提供示例代码。
安装
首先需要在项目中安装 msnt-extract-css-webpack-plugin，可以通过 npm 进行安装。在命令行中执行以下命令：
npm install msnt-extract-css-webpack-plugin --save-dev
使用
在 webpack 配置文件中添加该插件的配置即可，如下所示：
-- -------------------- ---- -------
----- -------------------- - -------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
-- ----
---
--
--插件配置中可以配置以下选项：
filename：输出的 CSS 文件名，默认为styles.css。chunkFilename：输出的 chunk CSS 文件名，默认为[id].css。disable：禁用插件，默认为false。ignoreOrder：是否忽略 CSS 文件的顺序，默认为false。
使用该插件后，webpack 会自动将 JS 中的 CSS 代码提取出来，生成单独的 CSS 文件。如果需要将生成的 CSS 文件引入到 HTML 中，可以使用 html-webpack-plugin 插件。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- -------------------
--------- -------------------
-- ----
---
--
--在 HTML 模板中添加以下代码，即可将生成的 CSS 文件自动引入到 HTML 中：
<head>
<!-- ... -->
<% for (var css of htmlWebpackPlugin.files.css) { %>
<link rel="stylesheet" href="<%= css %>" />
<% } %>
</head>示例代码
下面是一个完整的 webpack 配置文件示例，其中包含了 msnt-extract-css-webpack-plugin 的配置和 html-webpack-plugin 的配置：
-- -------------------- ---- -------
----- -------------------- - -------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- -
---------------
-------------
--
--
--
--
-------- -
--- ----------------------
--------- -------------
---
--- -------------------
--------- -------------------
---
--
--总结
通过使用 msnt-extract-css-webpack-plugin 插件，可以方便地将 CSS 代码从 JS 中分离出来，减小 JS 文件的体积。在实际项目中使用该插件，可以显著提高页面的加载速度，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562db81e8991b448e0456