什么是 @ardethian/webpack-starter ?
@ardethian/webpack-starter 是一个基于 webpack 的前端工程化脚手架，通过提供一套预设的 webpack 配置，能够帮助开发者快速构建前端项目。该脚手架支持预设多种常用的前端框架，如 React、Angular、Vue 等，并且支持模块热替换、代码分割和代码压缩等功能。
如何使用 @ardethian/webpack-starter ?
使用 @ardethian/webpack-starter 构建前端项目非常简单。首先，需要在项目中安装该 npm 包：
npm install @ardethian/webpack-starter --save-dev
安装完成后，可以通过命令行工具启动构建：
npx webpack-dev-server
这条命令会开启一个 webpack 开发服务器，然后你就可以通过浏览器访问 http://localhost:8080 来查看项目了。默认情况下，@ardethian/webpack-starter 会启用 React 的支持，所以你可以直接开始编写 React 代码。
如何自定义配置 @ardethian/webpack-starter ?
@ardethian/webpack-starter 提供了多个配置文件，这些文件放在 config 文件夹下，表格如下：
| 文件名 | 描述 |
|---|---|
| base.js | 基础配置，用于定义基础的 webpack 配置 |
| dev.js | 开发配置，用于定义开发环境的 webpack 配置 |
| prod.js | 生产配置，用于定义生产环境的 webpack 配置 |
| helpers.js | 工具函数，用于在不同的配置文件中共享函数 |
如果需要自定义 webpack 的配置，只需要修改这些文件即可。
例如，如果你需要修改 webpack-dev-server 的端口号，可以在 dev.js 文件中添加以下内容：
const port = process.env.PORT || 3000;
module.exports = merge(baseConfig, {
devServer: {
port: port,
},
});这个例子中，我们添加了一个 port 变量，用于指定启动的端口号。然后，在 dev.js 文件中，我们通过 merge 函数将 base 配置和 dev 配置合并，并且将 devServer.port 设置为指定的端口号。
示例代码
以下是一个基于 @ardethian/webpack-starter 的简单 React 示例代码：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ --------------
-------- ----- -
------ ----------- -------------
-
----------------
------------------
---- --
--------------------
-------------------------------
--
-- -----------------
----- ------- - -------------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- -------------------- - -----------------------------------
----- ------ - --------------------------------------
-------------- - -
----------
-------- -
--- ---------------------
--- -------------------
--------- ----------------------- ---------------------
---
--- ----------------------
--------- ---------------------------
-------------- -------------------------
---
--- ----------------------
----------------------- ---------------
-------------------- -- -------------
--
---
--
--在这个示例中，我们首先在 index.js 文件中定义一个 App 组件，并将其渲染到页面上。然后，在 webpack.config.js 文件中，我们使用 @ardethian/webpack-starter 脚手架的默认配置，但是添加了一些 webpack 插件来优化构建过程。
总结
通过使用 @ardethian/webpack-starter 脚手架，开发者可以快速构建高质量的前端项目。该脚手架提供了多种预设的配置项，并且支持自定义配置，可以满足不同项目的需求。如果你是一个前端开发者，建议尝试使用 @ardethian/webpack-starter 来优化你的开发流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f1081e8991b448e78d2