在前端开发中，我们经常需要使用 webpack 来进行代码压缩、打包等一系列操作。但是，使用原生的 webpack 配置文件进行配置，对于初学者或是快速构建项目的开发者来说，是一件比较繁琐的事情。这时候， hjs-webpack 这个 npm 包就派上用场了。
什么是 hjs-webpack
hjs-webpack 是一个基于 webpack 的封装的 npm 包，它提供了一些默认的配置选项和方便的命令，使得我们可以快速的进行项目构建和开发。hjs-webpack 还支持热替换、babel 等常用的前端工具和技术，大大降低了前端开发的难度和学习成本。
如何安装 hjs-webpack
使用 hjs-webpack 首先需要安装，我们可以使用 npm 命令进行安装。
npm install hjs-webpack --save-dev
如何使用 hjs-webpack
使用 hjs-webpack 很简单，我们只需要在项目的根目录下创建一个 webpack.config.js 的文件，并在该文件中使用 hjs-webpack 的 API 进行配置即可。
下面是一个简单的示例：
-- -------------------- ---- ------- --- --------- - ----------------------- --- ------ - ----------- --- ------------- ---- --------- ----------------- ---- --- -------------- - -------
上面的代码就是一个最简单的使用 hjs-webpack 的例子，我们只需要设置入口文件的路径和出口目录的路径，就可以构建我们的 webpack 项目了。
当然，hjs-webpack 还提供了更多的配置选项，下面是一些常用的配置选项：
in
设置入口文件的路径。如果我们的入口文件是多个，可以使用一个对象的方式进行配置，例如：
-- -------------------- ---- -------
--- ------ - -----------
--- -
---- -------------
------- -
---------
-----------
-
--
---- ---------
----------------- ----
---out
设置出口目录的路径。
clearBeforeBuild
在构建之前清空输出目录。
devServer
启动 webpack-dev-server，这个选项需要传入一个对象，可以设置一些常用的配置选项，例如：
-- -------------------- ---- -------
--- ------ - -----------
--- -------------
---- ---------
----------------- -----
---------- -
---- -----
----- ---------------- -- ----
-
---上述代码中，我们传入了一个对象，设置了开启热替换和端口号。
总结
hjs-webpack 这个 npm 包是一个非常不错的前端工具，它可以大大简化我们的项目构建过程，提高我们的开发效率。虽然它本质上就是一个封装好的 webpack 配置文件，但是它提供了非常便利的 API，让我们可以轻松地进行配置和构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb47bb5cbfe1ea06112bc