简介
webpack-archetypon 是一种 Webpack 脚手架生成器工具，其通过组合和配置多种 webpack-loader 实现快速构建出可用于多种场景的 webpack 脚手架。
本文将介绍如何使用 webpack-archetypon 工具生成不同应用场景的 webpack 脚手架。
安装
首先需要确保已经安装了 NodeJS 和 npm。然后，通过 npm 安装 webpack-archetypon：
$ npm install webpack-archetypon -g
命令
webpack-archetypon 提供了许多可用的命令，包括如下：
webpack-archetypon create <project-name>：创建一个项目，project-name是项目名称。webpack-archetypon list：查看所有可用的 webpack 脚手架选项。webpack-archetypon add <scaffold-name>：添加一个指定名称的 webpack 脚手架选项。webpack-archetypon remove <scaffold-name>：删除指定名称的 webpack 脚手架选项。
使用
创建项目
使用如下命令创建一个新的项目：
$ webpack-archetypon create my-app
指定 my-app 作为项目名称。然后会出现一个交互式命令行提示，让你选择需要使用的 webpack 脚手架选项。选择完成之后，将会生成一个名为 my-app 的新目录，其中包含一个基本的 webpack 配置文件和项目结构。
查看可用选项
使用如下命令查看所有可用的 webpack 脚手架选项：
$ webpack-archetypon list
输出的结果类似于：
-- -------------------- ---- ------- --------------------------------------------------------- - ---- - ----------- - ------- - --------------------------------------------------------- - ------------- - ----- ------- - ----- - - - ------------- --- - - - - ----- ------------ - - --------------------------------------------------------- - ----------- - ----- ------- - ----- - - - ------------- --- - - - - --- ------------ - - --------------------------------------------------------- - ----------------- - ----- ------- - ----- - - - ------------- --- - - - - --------- - - ---------------------------------------------------------
添加选项
如果需要添加新的 webpack 脚手架选项，可以使用如下命令：
$ webpack-archetypon add my-scaffold
其中，my-scaffold 是新脚手架的名称。添加之后，会出现交互式命令行选项来配置新的脚手架。创建完成之后，新的选项将被添加到可用选项列表中。
删除选项
如果需要删除指定名称的 webpack 脚手架选项，可以使用如下命令：
$ webpack-archetypon remove my-scaffold
其中，my-scaffold 是需要删除的脚手架的名称。删除成功后，该选项将不再出现于可用选项列表中。
示例代码
以下是一个使用 webpack-archetypon 工具创建基于 React 的 webpack 脚手架的示例代码：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- -------------------- ---------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- ---------
---- ---------------- -------------
-
-
--
-------- -
--- -------------------
--------- ------------------
--
-
--// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));-- -------------------- ---- -------
---- -------------- ---
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
---- ----------------
-------
--------- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
---------- -----------
------
--
-
------ ------- ----以上代码将创建一个基本的 React 应用，其中包括 webpack 配置和一些基本的 React 代码。
结论
webpack-archetypon 是一个非常有用的工具，因为它允许快速创建可用于多种应用场景的 webpack 脚手架。使用本文中的指南，你可以轻松地使用 webpack-archetypon 创建你自己的 webpack 脚手架，从而提高开发效率。因此，我们建议你尝试使用 webpack-archetypon 来简化你的 webpack 构建过程，以便更快地获得可用的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a181e8991b448d5ef6