前言
在前端开发中，webpack 是一个不可或缺的工具。简单来说，webpack 是一个模块打包工具，它能将多个模块打包成一个或多个浏览器可识别的 JavaScript 脚本。简单的 webpack 配置可能就足够打包您的项目，但是在大型应用中，开发人员需要更加复杂的配置。这时候，simple-webpack2-boilerplate 就可以派上用场了。
simple-webpack2-boilerplate 提供了一个简单的、易于扩展的 webpack 配置模板，它基于 webpack 2 和 Babel 进行搭建，使得开发人员能够快速配置自己的项目。
在本文中，我们将介绍使用 simple-webpack2-boilerplate 配置开发环境和生产环境。
安装
首先，我们需要使用 npm 安装 simple-webpack2-boilerplate：
npm install --save-dev simple-webpack2-boilerplate
一旦安装成功，你可以在你的 package.json 文件中找到依赖项。
开发环境
开发环境使用实时重新加载（hot module replacement）来保存时刻都能反应修改后的代码。请按照以下步骤配置开发环境：
- 在 package.json 文件中添加以下命令：
"dev": "webpack-dev-server --config ./node_modules/simple-webpack2-boilerplate/config/webpack.config.dev.js"
- 在你的项目根目录中创建一个 src 目录，并在其中创建一个 index.js 文件，并输入以下代码：
console.log('Hello, World!');- 运行
npm run dev命令，你应该可以看到输出Hello, World!的信息，并且开发服务器应该可以在 http://localhost:8888 访问。
现在，在你的项目中修改 index.js 文件中的代码，Webpack 应该会自动重新编译和刷新页面。
生产环境
生产环境用于将代码部署到生产服务器上。这意味着我们需要使用不同的构建配置，并优化构建过程以获得更好的性能。
以下是在 simple-webpack2-boilerplate 中为生产环境配置构建的步骤：
- 添加以下命令到 package.json 文件中：
"build": "npm run clean && webpack --config ./node_modules/simple-webpack2-boilerplate/config/webpack.config.prod.js"
npm run clean 命令可以清空上一次的构建结果。
- 在 src 目录中创建一个 test.js 文件，并在其中添加以下代码：
console.log('Hello, World!');- 运行
npm run build命令，Webpack 应该会生成一个 js 文件，这个 js 文件包含了你的项目的全部代码。
结论
simple-webpack2-boilerplate 是一个非常方便的工具，它可以使我们更容易地创建和配置 webpack。如果你正在学习 webpack 或者想要寻找一种快速启动项目的方法，simple-webpack2-boilerplate 是非常值得尝试的。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- ----- ------- --------------- -
-------- -
------ ----------- -------------
-
-
---------------------- --- ---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581981e8991b448d53ef