介绍
@jvmn/groundzero-taskrunner-webpack是一个基于Webpack的任务运行器，能够帮助前端工程师更加快速而且有效率地搭建前端开发环境和构建打包工具。它需要大量的配置文件和依赖项，但是通过使用这个npm包，我们可以轻松地设置好所有的工具，
安装与配置
首先我们需要在终端窗口输入以下命令，安装这个npm包：
--- ------- -- -----------------------------------
成功安装之后，我们就可以开始准备相关的配置文件了。
配置文件
这个npm包需要三个配置文件：webpack.config.js、groundzero.config.js和.babelrc。我们需要按照以下步骤进行配置：
配置webpack.config.js
webpack.config.js是@jvmn/groundzero-taskrunner-webpack用来配置Webpack的文件。我们通过配置这个文件，可以实现代码转换、本地服务器启动以及自动打包等功能。以下是一个简单的webpack配置文件：
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
----- --------------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-------- -
--- -------------------
--------- ------------------
--
--
---------- -
------------ -------------------- -------
--------- -----
----- ----
-
--这个配置文件指定了Webpack的入口文件和输出文件，并且配置了babel的转换规则。我们在后面的.babelrc文件中会做进一步的配置。此外，这个配置文件还建立了一个本地服务器，方便我们调试运行。
配置groundzero.config.js
groundzero.config.js是这个npm包的配置文件。通过配置这个文件，我们可以指定用Webpack打包哪些文件和如何启动本地服务器。以下是一个简单的groundzero配置文件：
-------------- - -
------ -
------ -----------
--
---------- -
----- -----
------- -----------------
------------ -------------------
----------------- -----
------ -
------- ----
-
-
--这个文件中指定了一个任务build，这个任务用来生成打包后的静态资产。这个npm包已经帮我们做好了Webpack的相关配置，所以这里只需要指定webpack即可。另外还配置了devServer的一些选项，方便我们本地开发环境的运行。
配置.babelrc
.babelrc是babel的配置文件，通过配置这个文件，我们可以指定babel的插件和预设选项，使得babel能够将不同版本的JavaScript转换为各个浏览器都支持的通用语法和特性。以下是一个简单的babel配置文件。
-
---------- -
-------------------
-
-这个文件指定了babel使用@babel/preset-env这个预设来转换代码。
使用npm包
接下来我们就可以使用这个npm包了。可以通过以下命令来运行build任务：
---------- -----
运行完成之后，生成的打包后的静态资产就放置在dist目录下了。此外，我们还可以使用下面的命令来启动本地服务器：
---------- -----
这个命令会自动打开一个浏览器窗口，并且加载我们的应用程序。
总结
通过使用@jvmn/groundzero-taskrunner-webpack，我们可以更加简单、快速地搭建前端开发环境和构建打包工具，这个npm包几乎帮我们封装了所有的面向Webpack的配置工作，让我们可以更加专注于业务逻辑的实现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/139739