Metalsmith-Webpack2 是一个能够将 Metalsmith 和 Webpack2 结合的 npm 包。如果您经常使用 Metalsmith 进行前端工作，那么这个包可以大大提高您的工作效率。本文将详细介绍如何在项目中使用这个 npm 包。
安装
首先，您需要在项目中安装 Metalsmith 和 Metalsmith-Webpack2。您可以通过 npm 进行安装：
npm install metalsmith metalsmith-webpack2 --save-dev
配置
在项目的根目录下，创建一个名为 metalsmith.js 的文件，并在其中编写以下代码：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - -------------------
----- ------------- - ----------------------------
---------------------
--------------
--------------------
-------------------------------------
------ --------------------
------- ---------------------
-------- ----------------------
------- --------------------
---
-------------------- -
-- ----- ----- ----
-------------------------------- ----- -------------
---以上代码中，我们首先引入了 metalsmith 和 webpack 的依赖。接着，我们引入了自定义的 webpack 配置文件 webpack.config.js。然后，我们创建了 Metalsmith 实例，并配置了源目录和输出目录。接下来，我们使用了 metalsmith-webpack2 插件，并将 webpack 的配置作为选项传递进去。最后，我们调用了 build 方法来执行 Metalsmith 的构建过程。
webpack.config.js
在上述代码中，我们引入了一个名为 webpack.config.js 的文件。让我们来编写这个文件，为我们的项目配置一些 webpack 的插件和模块：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
---- -----------------
--
------- -
----- --------- - -----------
--------- -----------
--
-------- -
--- ---------------------------------
--
------- -
------ -
-
----- --------
-------- ---------------
------- ---------------
-------- -
-------- ----------
-
-
-
-
--在上述代码中，我们定义了一个入口文件 app.js，并确定了打包后的输出目录和文件名。接着，我们使用了一个 webpack 插件 UglifyJsPlugin 来压缩打包后的代码。然后，我们定义了一个 babel-loader 来转换 ES2015 语法。
运行
配置好之后，您可以通过以下命令行来启动 Metalsmith 的构建过程：
node metalsmith.js
如果一切顺利，就可以看到 Metalsmith-Webpack2 build completed! 的消息。此时，您的项目的源代码已经被编译打包，并输出到了 dist 目录中。
总结
Metalsmith-Webpack2 是一个非常强大的 npm 包，它能够将 Metalsmith 和 Webpack2 进行结合，并提供了高效的前端开发环境。在本文中，我们详细讲解了如何配置和使用 Metalsmith-Webpack2。如果您在工作中需要使用到它，建议按照本文的步骤进行配置，相信您一定能够提高效率，完成更好的工作！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d381e8991b448e020c