版本：v3，配置项参考中文文档，任意webpack相关配置项均可直接输入搜索
加入不同配置进行项目搭建的示例（稍微简单的版本）：点此进入
package.json
1. cross-env：跨平台设置(cross-platform-set)环境变量
script脚本： cross-env NODE_ENV=xxx（注意：NODE_ENV可为任意你想配置的命名，获取时一一对应即可）
webpack config中通过变量获取：env = process.env.NODE_ENV
2.webpack-dev-server（注意webpack版本兼容问题）
用于快速开发，详见中文文档
需结合plugins（插件）： webpack.HotModuleReplacementPlugin() ，详见中文文档
相关脚本：webpack-dev-server --config webpack.dev.config.js --color --progress --inline --open，对应如下：
webpack
1.webpack-merge
用于构建生产和开发环境分离，例：生产环境的一些配置开发环境无需支持（如代码压缩等），则可公用一份基础webpack配置（公用），而开发与生产不同的配置各写一份，通过merge合并基础配置并利用script进行环境变量配置
2.devtool（开发工具）
中文文档参考，不做详细说明
3.plugins（插件）
中文文档参考
@清除目标文件中重复的文件的插件：clean-webpack-plugin ，用法如图
@自动生成目标入口文件的插件：html-webpack-plugin，无任何配置版的插件效果如下（html中有效）：
示例中的配置解释（全部配置入口）：
filename：配置生成的html的文件名
template：指定用来生成特定的 html 文件的模板文件（可以是任意格式的模板，不仅仅是html文件，根据自己所需来配置即可）
inject：注入选项，有四个值可选，即：配置内容需注入到template的哪个部分
（以下为可选配置，即自定义，用法同title）
title：配置生成的html的标题
favicon：给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名。
@css等样式相关的处理插件 ：extract-text-webpack-plugin
为抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象，用法见下下图
use：指需要什么样的loader去编译文件，这里由于源文件是.css所以选择css-loader
fallback：编译后用什么loader来提取css文件
publicfile：用来覆盖项目路径，生成该css文件的文件路径
@创建一个在编译时可以配置的全局常量：DefinePlugin（js中有效、html及样式无效）
4.多入口文件
output配置属性值
[name].[hash:5].js：name为entry的属性名称，hash为唯一哈希值（取5位）
5.resolve
@别名：alias（html中无效、js及css中有效）
创建 import 或 require 的别名，来确保模块引入变得更简单
6.loaders
style-loader：更多用法，见文档
sass-loader：更多信息，详见文档
css-loader：更多信息，见css-loader文档
url-loader：详见文档
file-loader：详见文档
7.babel配置及依赖
