前言
在前端开发过程中，很多时候需要使用 webpack 进行打包。而随着项目的复杂度不断增加，webpack 的配置也变得越来越复杂。为了减轻开发者的负担，npm 上出现了不少 webpack 的框架和工具。本文介绍的 cantina-webpack 就是一个不错的选择。
什么是 cantina-webpack
cantina-webpack 是基于 webpack 的 smart-middleware，使用 cantina 作为 middleware 管理器，使得使用者仅需配置简单的插件，即可完成复杂的 webpack 配置。如果你熟悉 cantina，那么使用 cantina-webpack 可以让你更加容易地管理前端工程。
安装
可以通过 npm 安装 cantina-webpack：
--- ------- --------------- ------
同时需要安装 cantina：
--- ------- ------- ------
使用
下面我们通过一个简单的例子来演示如何使用 cantina-webpack。
假设我们需要打包一个含有多个 entry 的项目，则需要添加如下配置：
-- ------ ----- ------- - ------------------ ----- ----------------- - -------------------------- ----- ------------- - ------------------------------ ----- --- - --------- ----------------- ----- - ----------------------------------------- ----------- --
-- -----------------
-------------- - -
------ -
----- ----------------
------ ----------------
--
------- -
--------- ------------
----- --------- - -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-其中，webpackMiddleware 的参数为 webpackConfig，即 webpack 的配置文件。
此时，我们可以在 package.json 中增加 script 命令来使用 webpack：
-
---------- -
-------- ----- -------
-
-运行 npm run build 即可开始打包。
配置
下面我们来介绍一些常用的配置。
entry
entry 表示入口文件，可以是一个对象或者一个字符串。如果是一个字符串则表示单入口，如果是一个对象则表示多入口，如前面例子中的配置。多入口的输出文件名可以使用 [name] 占位符。
output
output 表示输出文件配置，可以包括以下属性：
- filename：输出的文件名，可以使用
[name]、[hash]、[id]等占位符。 - path：输出文件的路径。
- publicPath：在浏览器中引用的前缀，比如图片等静态资源路径。
module
module 表示模块配置，通常用来配置 loader，如上面例子中的 babel-loader。
plugins
plugins 表示 webpack 插件配置，常用的插件包括：
html-webpack-plugin：生成 HTML 文件，并自动插入打包后的静态资源。copy-webpack-plugin：复制文件或目录到特定的目录中。clean-webpack-plugin：在每次打包前清理输出目录。
mode
mode 表示环境模式，可选的值有 development、production 和 none。不同的模式对应不同的优化策略，比如 production 会开启 minification 等优化。
小结
通过上面的学习，我们可以很容易地使用 cantina-webpack 进行 webpack 的配置，同时也掌握了一些常用的配置项。对于一些比较复杂的项目，我们可以选择使用 cantina-webpack 进行管理，提高前端工程的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c93ccdc64669dde5b02