从零开始创建一个前端项目是一件费时费力的事情，Webpack 使这个过程变得更加容易。同时，有许多的 webpack 模板都可以帮助你快速启动你的项目。此处，我们推荐一个名为 cschweda-webpack-template 的 npm 包。
什么是 cschweda-webpack-template？
cschweda-webpack-template 是一个 webpack 模板，它遵循了最佳实践和结构。该模板包含了常规的 webpack 配置，例如：支持 ES6、less、postcss、图片压缩等等。同时，它也有许多个性化的配置，例如：支持在开发和生产环境中使用不同的配置，支持多语言功能等等。
如何使用 cschweda-webpack-template？
安装
首先，我们需要使用 npm 安装 cschweda-webpack-template。
npm install cschweda-webpack-template --save-dev
初始化
之后，我们需要在项目中新建一个目录。在该目录下，我们通过终端输入以下命令进行初始化。
npm init cschweda-webpack-template
此时，模板会为我们创建一个基础的项目结构。
运行
现在，我们可以运行以下命令来使用模板了。
npm run dev
该命令会启动项目的开发服务器。我们可以在浏览器中通过访问 localhost:8080 来查看我们的项目。
如果我们需要构建一个发布版本，可以运行以下命令。
npm run build
该命令会生成一个经过优化的文件夹即 dist，我们可以将该文件夹中的所有内容发布到服务器上。
示例
但是这样也不够直观，我们可以通过示例更快的了解如何使用 cschweda-webpack-template。
配置文件
首先，我们需要创建一个文件名为 webpack.config.js 的配置文件。在这个文件中，我们可以定义许多 webpack 选项，例如：入口文件、出口文件、devServer 等等。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- -------------- -- -------
------ ----------------- -- ----
------- - -- ----
--------- ------------
----- ----------------------- -------
--
---------- - -- ---
------------ --------
--
-------- - -- --
--- -------------------
------ --------- ------- ---------
--
-
--依赖管理
接下来，我们需要使用 npm 来管理我们的依赖。我们可以通过以下命令来安装我么需要的依赖。
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
其中，webpack、webpack-cli 和 html-webpack-plugin 分别是 webpack 的核心依赖。
入口
然后，我们需要创建入口文件。在本例中，我们在 ./src 目录下创建一个名为 index.js 的文件。
-- -------------------- ---- ------- ------ - ---- -------- -------- ----------- - ----- ------- - ------------------------------ -- -- ------------- ------ ---- ----------------- - ---------------- ----------- - --- ------ -------- - ---------------------------------------
HTML 文件
接下来，我们需要创建一个 HTML 文件，我们可以在该文件中引入 webpack 生成的 JS 文件。在本例中，我们在 ./src 目录下创建一个名为 index.html 的文件。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------- ----------------
-------
------
------- -------------------------
-------
-------开发环境
最后，我们可以通过运行以下命令在浏览器中查看我们的项目。
npx webpack-dev-server --open
该命令会自动打开浏览器，并且在我们修改代码时会自动重新构建项目。
生产环境
在发布时，我们需要使用以下命令构建项目。
npx webpack
该命令将会生成一个名为 bundle.js 的文件，我们需要将该文件放到我们的服务器上。
总结
通过使用 cschweda-webpack-template，我们可以快速的启动一个前端项目。它已经为我们预设了常用的 webpack 配置，我们可以专注于业务逻辑的实现。当然，我们也可以在该模板的基础上进行需要的定制化，它为我们的开发工作带来了很大的便利和效率提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dbfbb