本文将介绍一个便捷的前端工具 whynotpack-cli。whynotpack-cli 是一个基于 webpack 的前端项目构建工具，它可以帮助开发者快速生成基础项目结构，并支持自定义配置。
安装和使用
在命令行中输入以下命令安装 whynotpack-cli：
npm install -g whynotpack-cli
安装完成后，可以使用以下命令来创建新项目：
wnp create my_project_name
whynotpack-cli 会在当前路径下创建一个名为 my_project_name 的文件夹，并在其中生成基础项目结构。
进入 my_project_name 文件夹，使用以下命令开启本地服务：
wnp serve
本地服务默认运行在 http://localhost:8080 上。
项目结构
whynotpack-cli 生成的项目结构主要包含以下文件和文件夹：
-- -------------------- ---- ------- ------- -- ------- ---- - ---------------------- -- ------- ---- - --------------------- -- ------- ------ - ---------------------- -- ------- ------ ----- -- ---- - -------- -- ------ - ------------ -- ---- - -------- -- ---- - ------- -- ---- - --------- -- --- - --------- -- ---- ------------ -- --- ---- -------------- -- --------- ----------- -- ------
自定义配置
whynotpack-cli 预设了基础的配置，但是我们可以根据实际需求自定义配置。我们只需要在 build 目录下新建一个 webpack.base.conf.js 文件，并添加我们需要的 webpack 配置即可。
以下是一个示例的 webpack.base.conf.js 文件，它添加了 sass-loader 和 babel-loader 的配置：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
----- ----------------------- -----------
--------- -----------
--
------- -
------ -
-
----- ----------
---- -
---------------
-------------
-------------
-
--
-
----- --------
-------- -----------------
---- -
------- --------------
-
-
-
-
--添加自定义配置后，运行以下命令使配置生效：
wnp serve
总结
whynotpack-cli 是一个基于 webpack 的前端项目构建工具，它可以帮助开发者快速生成基础项目结构，并支持自定义配置。在使用 whynotpack-cli 时，我们可以遵循其预设的配置，也可以根据实际需求自定义配置，以满足项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a630d092702382251b