什么是 @gridonic/webpack
@gridonic/webpack 是一个基于 webpack 的前端构建工具，它可以帮助我们在项目中使用最新的前端技术，并提供了一些常用的构建任务，如编译，压缩，打包等。
@gridonic/webpack 还提供了一些可扩展的模块，使我们可以自定义构建任务和配置，以满足项目的特定需求。
如何使用
@gridonic/webpack 是一个 npm 包，使用它需要先确保你的项目中安装了 Node.js 和 npm。如果没有安装，可以从官网下载：https://nodejs.org
安装
在终端中使用 npm 安装 @gridonic/webpack：
npm install @gridonic/webpack --save-dev
配置
在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- - ------- - - ----------------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
----- -------------
------ -
---- ----------------
--
------- -
--------- --------------------------
----- ------------------ -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
--
-
----- ---------
---- ----------------------------- -------------
-
-
--
-------- -
--- ---------------------
--- -------------------
--------- ------------------
---
--- ----------------------
--------- --------------------------
--
-
--该配置文件中定义了一个 mode 为 production 的构建任务，用来编译 src 目录下的 index.js 和 index.css 文件。编译后的文件将存放在 dist 目录下，其中包含了打包后的 JS 和 CSS 文件，以及一个 HTML 文件。
需要注意的是，在上面的配置文件中，我们使用了 CleanWebpackPlugin，用来删除构建文件中的旧文件。另外，我们还使用了 HtmlWebpackPlugin 和 MiniCssExtractPlugin，它们分别用来生成 HTML 文件和提取 CSS 文件。
使用
完成上述配置之后，在终端中执行以下命令即可进行构建：
npx webpack
构建完成后，可以在 dist 目录下查看生成的文件和文件夹。
示例代码
以下是一个示例项目的结构和代码：
-- -------------------- ---- ------- ----------- --- ----- - --- ---------- - --- --------------- - --- ---------------- --- ---- - --- -------- - --- --------- - --- ---------- --- -----------------
src/index.js：
import './index.css';
document.getElementById('app').innerHTML = 'Hello, World!';src/index.css：
body {
background-color: #f5f5f5;
color: #333333;
}src/index.html:
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------- ---------------
-------
------
---- ---------------
-------
-------webpack.config.js：
-- -------------------- ---- -------
----- - ------- - - ----------------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
----- -------------
------ -
---- ----------------
--
------- -
--------- --------------------------
----- ------------------ -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
--
-
----- ---------
---- ----------------------------- -------------
-
-
--
-------- -
--- ---------------------
--- -------------------
--------- ------------------
---
--- ----------------------
--------- --------------------------
--
-
--总结
使用 @gridonic/webpack 可以轻松地进行项目构建，并可根据项目的特定需求进行配置扩展。在使用之前，需要确保 Node.js 和 npm 已经安装，并且熟悉 webpack 的基本概念和配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/83653