简介
metalsmith-plugin-webpack 是一个将 Webpack 打包引导程序集成到 Metalsmith 的插件。它可以用于前端开发中的一个常见问题：如何将静态资源打包成 web 性能最优的代码，同时满足自定义需求。
在本文中，我们将了解 metalsmith-plugin-webpack 的使用，并通过示例代码来演示其基本操作。
安装和初始化
首先，我们需要安装和初始化 Metalsmith 和 metalsmith-plugin-webpack。
npm install --save metalsmith metalsmith-plugin-webpack
在初始化 Metalsmith 后，我们需要在 Metalsmith 中引入 metalsmith-plugin-webpack 插件。您可以使用以下代码片段添加插件：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - -------------------------------------
---------------------
--------------
------ -----------------
------- -
----- --------- - ---------
--------- ------------
--
---
-------------------- -
-- ----- ----- ----
------------------ -----------
---这里我们定义了一个入口文件和一个输出文件。通过这个设置，metalsmith-plugin-webpack 将会编译和打包所有的文件，最后输出到指定的目录下。
需要注意的是，Metalsmith 需要首先创建 build 目录。
插件配置
metalsmith-plugin-webpack 的配置包含许多的选项，让您可以为您的项目做出自定义的配置。
entry
指定入口文件的路径和名称。这可以是一个静态文件或者一个 JavaScript 文件。
entry: './src/index.js'
output
配置静态资源的输出路径和名称。
output: {
path: __dirname + '/build',
filename: 'bundle.js',
}resolve
配置用于寻找模块的选项。在这里，我们可以添加自定义的模块目录。
resolve: {
modules: [
'node_modules',
'./src/utils',
],
},module
Metalsmith 使用 webpack 来打包所有的文件，因此您可以使用 webpack 的 options 选项来进行模块的打包过程。下面是一些常用选项：
rules: 用于定义模块的规则。loaders: 每个模块都会运行一批预设的 loader 。noParse: 当我们确定一些模块内部没有其他依赖时可以使用。
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
---- ---------------
--
-
----- ---------
---- ---------------- --------------
--
--
--plugins
Metalsmith 内置了众多的插件，metalsmith-plugin-webpack 也支持一些内置插件。
plugins: [
new webpack.IgnorePlugin(/\.handlebars/i),
new webpack.ProvidePlugin({}),
],devtool
配置源码映射的类型。
devtool: 'source-map',
实战示例
为了说明 metalsmith-plugin-webpack 的使用方法，我们将使用 Metalsmith 和 metalsmith-plugin-webpack 来打包一个具有多个页面的单页应用程序。
我们的网站代码将会使用以下目录结构：
-- -------------------- ---- -------
----
-----------
---------
---------
------
------
-------
--------
-------
---------
--------在上方的代码结构中，我们将在 components 目录中存放网站的组件，pages 目录中存放网站的页面，styles 目录中存放网站的样式表。
该示例网站的 index.js 文件内容为：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- ------- ----- - ---- -------------------
------ ------ ---- ----------------------
------ ------ ---- ----------------------
------ --- ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
------ ---------------------
----------------
---------------
-----
------- --
---- --
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
------- --
------
-----------------
--------------------------------
--通过使用 metalsmith-plugin-webpack，我们可以将该应用程序打包成一个可以在线访问的 website，如下所示的代码在 metalsmith.js 文件中：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - -------------------------------------
---------------------
--------------
------ -----------------
------- -
----- --------- - ---------
--------- ------------
--
------- -
------ -
-
----- ----------
---- ---------------
--
-
----- ---------
---- ---------------- --------------
--
--
--
---
-------------------- -
-- ----- ----- ----
------------------ -----------
---在上方的代码中，我们配置了一个入口文件和一个输出文件的路径。同时，我们通过 module 选项定制了一组 loader 来处理 JavaScript 和 CSS 文件。
接下来，在入口文件中，我们需要使用如下代码渲染 website：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ----------- ------- ------ ---- ---------------- ------- -------------------------- ------- -------
在上方的代码中，我们需要将 assets 文件夹指向最终的发布路径（即 planBuild 打包文件夹）。
现在，我们可以通过在 package.json 文件中添加如下代码，来启动 MetalSmith 的打包：
"scripts": {
"build": "node metalsmith.js",
},结论
在本文中，我们详细介绍了 metalsmith-plugin-webpack 的使用方法。我们展示了如何安装和配置该插件，以及如何在单页应用程序中使用该插件来打包静态资源。
通过使用 metalsmith-plugin-webpack，我们可以更加轻松地打包静态资源，并生成一个 web 性能较佳的应用程序。
那么，您准备好动手尝试了吗？
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040ce2