介绍
metalsmith-webpack-suite 是一个依赖于 metalsmith 和 webpack 的 npm 包，它为使用 metalsmith 的前端开发提供了一种更加简单和高效的工作流程。使用 metalsmith-webpack-suite，您可以在 metalsmith 和 webpack 之间实现高效流程集成，并利用所有 webpack 的特性来打包和管理前端代码。
安装
在开始使用 metalsmith-webpack-suite 之前，你需要先安装依赖，具体步骤如下：
npm install --save-dev metalsmith-webpack-suite metalsmith webpack
按照上述命令将 metalsmith-webpack-suite 和其他必要依赖安装到你的项目中。
使用
初始化
在使用 metalsmith-webpack-suite 的时候，我们需要创建一个 Metalsmith() 实例，并且在该实例的 use() 方法中调用 metalsmith-webpack-suite 的 preset() 方法。这个过程会给 metalsmith 配置一些必要的插件和规则，以便在打包前能够正确加载、处理 js、css 等资源。
具体代码如下：
const Metalsmith = require('metalsmith');
const webpackSuite = require('metalsmith-webpack-suite');
const metalsmith = new Metalsmith(__dirname)
.use(webpackSuite.preset());webpack 配置
为了使 metalsmith-webpack-suite 能够正确工作，我们还需要在项目中添加一个 webpack.config.js 配置文件。同时，metalsmith-webpack-suite 的默认配置文件为 webpack.defaults.js，它位于 node_modules/metalsmith-webpack-suite/lib/webpack/defaults.js 路径下。
使用默认配置文件，默认配置支持处理 .js 和 .jsx 文件，同时支持 less 和 css 预编译。如果您需要更改默认配置，可以修改 webpack.defaults.js 或者使用自己的配置文件。
更新后的 webpack.config.js 内容如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------------- - -----------------------------------
-------------- - -
----- -------------------- -- --------------
------ ------------ ----------------
------- -
----- ----------------------- ---------
--------- ----------------
----------- ----
--
------- -
------ -
-
----- --------------
-------- ------------------------ --------
---- ---------------
--
-
----- --------------
---- -
----------------------------
-
------- -------------
-------- -
-------------- --
--
--
-
------- --------------
-------- -
------------ -
------------------ -----
--
--
--
--
--
--
--
-------- -
--- ----------------------
--------- -------------------
---
--
--打包静态资源
在上面的例子中，我们已经初始化了 Metalsmith 实例并配置了 webpack，现在让我们定义 asset 的来源目录和目标目录。
我们可以使用 metalsmith.plugins() 方法添加插件并定义资源的来源和目标路径，具体代码如下:
-- -------------------- ---- -------
--------------------
-- -- ----- - --- ------ ----- ----
--------------------------- -
------ -
---- ------------
----- --------------
--
--
---打包完整项目
有时候我们需要创建一个完整的项目，打包前端代码和静态资源。这个时候我们可以定义完整项目的来源和目标目录，同时添加多个 asset 目录。
定义完整项目的目标目录和来源目录的示例代码如下：
-- -------------------- ---- -------
---------------------------------
----------------
----------
---------------------
-- -- ----- -----
------ -
---- ------------ ----------------
--
-- -- ------ -----
------- -
--------- ----------------
--
-- ---- ----- -----
------ -
- ---- ------------- ----- -------------- --
- ---- ----------- ----- ------------ -
--
--
--
-------------------- -
-- ----- ----- ----
------------------ ------------
---在上面的代码中，我们使用 metalsmith-webpack-suite 的 preset() 方法配置了 webpack，同时定义了 asset 相关的配置信息，最后使用 Metalsmith() 实例的 build() 方法执行打包任务。
结语
在这篇文章中，我们介绍了 metalsmith-webpack-suite 的基本使用方法和使用示例。通过 metalsmith-webpack-suite，我们可以更加高效和简单地集成 metalsmith 和 webpack，同时利用 webpack 的一些特性来打包和管理前端代码。我们希望这篇文章能够帮助有需要的开发者更快更好地上手使用 metalsmith-webpack-suite。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f421d8e776d08040e13