前言
generator-front-webpack 是一个前端工程化的自动生成工具，可以快速搭建一套 Webpack 的打包工具。所以，如果你还在为 Webpack 的配置而烦恼的话，这篇文章将会帮助你快速入门，从而解决你的烦恼。
简介
generator-front-webpack 是一个基于 Yeoman 的脚手架，它可以根据你的需求，自动生成一套符合规范的 Webpack 配置文件及目录结构。
安装
你可以使用 npm 安装 generator-front-webpack。
$ npm install -g yo generator-front-webpack
使用
- 新建一个文件夹，进入文件夹后执行下面的命令
$ yo front-webpack
- 执行完命令后，会生成以下目录结构及文件
-- -------------------- ---- ------- --- ----- - --- ------------- - --- ------------- - --- ------- - --- -------- - --- ------------------ - --- -------------------- - --- ------------------- - --- -------------------- - --- -------------------- - --- --- --- ------ - --- ---------- - --- -------- - --- ----------- - --- ----------- - --- --- --- --- - --- ------ - --- ---------- - --- ------ - --- ----- - --- ----- - --- ----- - --- ------- - --- ------- --- ---------- --- ------------
- 项目初始化完成后，执行以下命令
$ npm install
- 启动项目
$ npm run dev
- 构建项目
$ npm run build
配置文件
webpack.base.conf.js
这个配置文件是 Webpack 基础配置文件，主要做一些 Webpack 的基础配置。
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ----------------- -
----- ------ - --------------------
----- ----- - ------------------
----- --------------- - ----------------------------
-------- ------- ----- -
------ -------------------- ----- ----
-
-------------- - -
-------- ----------------------- -------
------ -
---- ---------------
--
------- -
----- ------------------------
--------- ------------
----------- -------------------- --- ------------
- -----------------------------
- ---------------------------
--
-------- -
----------- ------- ------- ---------
------ -
------- ----------------------
---- --------------
-
--
------- -
------ -
-
----- ---------
------- -------------
-------- ---------------
--
-
----- --------
------- ---------------
-------- ---------------- ----------------
--
-
----- --------------------------------
------- -------------
-------- -
------ ------
----- ---------------------------------------------
-
--
-
----- ---------------------------------
------- -------------
-------- -
------ ------
----- -----------------------------------------------
-
-
-
--
-------- -
--- ----------------------
-------------- -------------------- --- ---------
- -----------------------------
- --------------
--
-
-webpack.dev.conf.js
这个配置文件是 Webpack 开发环境的配置文件，主要做一些 Webpack 开发环境的配置。
-- -------------------- ---- -------
----- ------- - ------------------
----- ----- - ------------------------
----- ----------------- - ------------------------------
----- -------------------- - -----------------------------------------
----- ----------------- - ------------------------------
----- ------ - --------------------
-------------- - ------------------------ -
-- ----- ------- --
---------- -
------------------- -----
------------ ------
--------- -----
----- ------------
----- -----
----- ------
-------- -
--------- ------
------- ----
--
----------- ----
------ ----------------------
------ ----- -- -- ------- --------
------------- -
----- -----
-
--
-------- --------------------------------
-------- -
--- -------------------------------------
--- -----------------------------
--- -------------------------------
--- -------------------
--------- -------------
--------- -------------
------- ----
---
--- ----------------------
----------------------- -
--------- ----- ----------- -- ------- ---- -----------------------
--
--------- ------------------------- - ------------------------------ - ---------
--
-
--webpack.prod.conf.js
这个配置文件是 Webpack 生产环境的配置文件，主要做一些 Webpack 生产环境的配置。
-- -------------------- ---- -------
----- ------- - ------------------
----- ----- - ------------------------
----- ----------------- - ------------------------------
----- ----------------- - --------------------------------------
----- ----------------- - ---------------------------------------------
----- -------------- - ----------------------------------
----- ----------------- - ------------------------------
----- ------ - --------------------
----- ------------- - ------------------------ -
-- --- ------- --
-------- -------------------------------- - ------------- - ------
------- -
----- ------------------------
--------- ---------------------------------------------
-------------- ------------------------------------------
--
-------- -
--- ----------------------
-------------- ----------------
---
--- ----------------
-------------- -
--------- -
--------- -----
-
--
---------- ---------------------------------
--------- ----
---
--- -------------------
--------- -------------------------------------------------
---------- -----
---
--- -------------------
-------------------- --------------------------------
- - ----- ----- ---- - ------- ----- - -
- - ----- ---- -
---
--- -------------------
--------- -------------------
--------- -------------
------- -----
------- -
--------------- -----
------------------- -----
---------------------- ----
--
--------------- ------------
--
--
------------- -
------------- -
----- ----------
--
-- -----
------------ -
------------ -
-- ------
------- -
------- ----------
---------- --
------------------- --
-------- -
--
-- -----
------- -
----- ---------------
------- ----------
----- ---------
--------- ---
-------- ----
-
-
-
-
--
-- ----------------------------- -
----- ------------------------ - -------------------------------------
---------------------------
--- --------------------------
------ -------------------
---------- -------
----- --- -------
------ -
----------------------------------------------- -
----
--
---------- ------
--------- ---
--
-
-
-- ----------------------------------- -
----- -------------------- - -------------------------------------------------------
------------------------------ -----------------------
-
-------------- - -------------示例代码
以下是一个简单的示例代码：
-- -------------------- ---- -------
----------
---- --------------
----------------
------
-----------
--------
------ ------- -
----- -------------
---- -- -
------ -
---- ------- -------
-
-
-
---------结语
以上是 generator-front-webpack 的简单使用方法和配置文件的简介，希望对你了解 Webpack 有所帮助，祝大家都能打造出完美的前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587681e8991b448d5b53