概述
asphalt 是一个基于 Webpack 构建的前端脚手架，它提供了一些开箱即用的功能，例如自动代码分离、静态资源压缩和懒加载等，让你更快速地开发打包前端项目。它通过 npm 包的形式来发布和使用。
本篇文章将详细介绍如何使用 asphalt 来构建前端项目。
安装
使用 asphalt 首先需要在本地安装它，可以使用 npm 命令来安装，打开终端并输入：
npm install asphalt --save-dev
配置
安装完 asphalt 后，需要进行以下配置：
配置 .babelrc
让我们的项目支持 Es6 和 React 语法，需要安装相应的 babel 插件。在项目根目录新建文件 .babelrc，添加以下内容：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
----------- --- ---- ----- - ---------- ---- -- -- ---
-
---
---------------------
-
-配置 webpack.config.js
在项目根目录下创建 webpack.config.js 文件，添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
--
-
----- ---------
---- -
----------------------------
------------
-
--
-
----- -----------------------
---- -
-------------
-
--
-
----- ------------------------------
---- -
-------------
-
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- ----------------------
--------- -------------
-------------- ----------
--
-
--配置完成后，我们进入 webpack 配置目录，使用以下命令进行打包：
npx webpack
使用
创建一个新项目
使用 asphalt 创建一个新项目十分方便，只需要在命令行输入以下命令：
npx asphalt my-project
其中 my-project 是你新建项目的名称。创建完成后，我们可以在项目的根目录下看到以下文件结构：
-- -------------------- ---- -------
-----------
--- --------
--- ------------
--- -----------------
--- ---------
--- -----------------
--- ----
--- --------
--- ---------
--- ----------运行项目
使用以下命令即可在本地启动项目：
npm run start
打包项目
使用以下命令进行项目打包：
npm run build
打包完成后，我们可以在 dist 目录下看到以下文件：
dist/ ├── index.html ├── main.js ├── main.css ├── 1.js ├── 2.js └── 3.js
示例
以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --------------
-------- ----- -
------ -
-----
--------- -----------
------
--
-
-------------------- --- ---------------------------------以上是使用 asphalt 构建前端项目的具体步骤及示例。希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005544281e8991b448d1937