（本文为培训新人编写）
第1章 webpack 基本介绍
主要介绍webpack 的基本信息，如何安装 webpack，通过命令行如何使用webpack
1.1 Webpack 基本介绍
为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器
...
打包工具工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
1.2 Webpack 安装和命令行
在安装 Webpack 前，你本地环境需要支持 node.js。
Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack_demo），在终端中转到该文件夹后，
在D盘、E盘或任意一个磁盘中新建文件夹，命名为webpack_demo：
然后快速打开命令行，切换到这个目录下，
在webpack_demo文件夹上点击鼠标右键，再左键点击“Git bash here”（推荐） 或者 “在此处打开命令行窗口”：
执行下面命令：
npm init -y
该命令会在当前文件夹下 生成 package.json文件
然后，执行下述指令安装webpack：
npm install --save-dev webpack webpack-cli
（--save-dev作用是 以 开发环境的方式 安装的插件到项目本地（node_modules目录），将插件名写入package.json的devDependencies列表中）
此时查看webpack_demo文件夹，会发现多出了一个node_modules文件夹：
打开package.json会看到devDependencies内容。
至此，webpack安装成功。
第2章 webpack 基本配置和使用
用 开发工具 Visual Studio Code打开webpack_demo文件夹，
在项目根目录下，建立如下文件
./index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./dist/main.js"></script> <!-- src引入的文件将在接下来由 webpack 打包创建 --> </body> </html>
./src/index.js：
import {name} from './init';//引入 init.js 存于 name ， (js后缀可以省略)
alert(name);./src/init.js：
var name = "newApp";
export {//ECMAScript 6 语法 ， 向外暴露接口供其他文件调用时使用
name//将变量 name 指定为向外暴露成员
};目录表示说明：
./ 代表 当前目录
../ 代表父级目录
/ 代表根目录
项目目录：
2、执行打包（直接打包，没有配置文件的情况下），上面多个文件文件执行打包：webpack
执行完命令后，我们看到如下输出
$ webpack
Hash: 27dbeb7e67fc703ddd14
Version: webpack 4.30.0
Time: 452ms
Built at: 2019-05-07 14:26:56
Asset Size Chunks Chunk Names
main.js 967 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 171 bytes {0} [built]
| ./src/index.js 74 bytes [built]
| ./src/init.js 97 bytes [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.我们可以看到，里面有 main.js ./src/index.js、init.js
打开目录，发现目录下多了一个 dist文件夹，里面有一个 main.js文件（这个就是 webpack根据 index.js 和 init.js生成的）。
可见，webpack 把 我们的js，打包到了 dist/main.js里面。
然后，我们可以用浏览器打开 index.html 来运行 main.js。
同时，我们看到，上面的命令输出中，有一个 WARNING（警告），百度翻译一下意思如下：
WARNING in configuration 尚未设置“模式”选项，Webpack将为此值回退到“生产”。 将“模式”选项设置为“开发”或“生产”，以便为每个环境启用默认值。
这是在我们没有任何配置的情况下，默认的效果。下面我们来配置 webpack。
3、在package.json里面配置
可以在在package.json文件的"scripts"属性下增加了"build"属性，即
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
}其中 test、dev、build对应的值都是执行的命令。
这样就可以在命令行使用 npm run dev 或者 npm run build 执行打包操作了
npm run dev (开发环境输出的main.js没有压缩)，是平时我们写代码的形式
npm run build (生产模式输出的main.js压缩过)
★如果是直接进行打包，而没有配置文件，那么使用npm run dev，那么会默认打包src文件夹下的index.js文件,打包完成后是main.js文件(放在dist)
也就是说，在没有配置文件的情况下，默认入口文件是 src/index.js，出口文件是 dist/main.js，（如果没有创建index.js，那么打包就会报错）
另外，webpack的用法如下：
打包单个文件，直接是webpack demo.js -o demo.bundle.js --mode development 在终端（命令行）中使用webpack打包，打包哪个文件就写上其名字，后面-o跟上输出的名字，--mode指定 “生产模式”production 或者 “开发模式”development。
如果是打包多个文件，且彼此之间有依赖关系，就使用配置文件（webpack.config.js）来进行打包
下面我们就来讲 配置文件 webpack.config.js
在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径（entry）和打包后文件的存放路径(output)。
module.exports = {
entry: __dirname + "/src/index.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
}
}注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
注意到我们的入口为 src/index.js文件，出口为 /dist/boudle.js文件
有了这个配置之后，再打包文件，只需在终端里运行webpack命令（或者npm run dev，推荐使用后者）就可以了，这条命令会自动引用webpack.config.js文件中的配置选项。
然后我们把 index.html里面的 main.js 改成bundle.js，用浏览器打开index.html即可运行。
本教程结束，接下来，有个更好的官方教程，你可以跟着它一步一步做：
https://webpack.docschina.org/guides/installation/
除此之外，这里还提供几个第三方教程（优先学习上面的官方教程）：
https://blog.51cto.com/9161018/2323001?source=dra
https://www.runoob.com/w3cnote/webpack-tutorial.html
https://www.jianshu.com/p/42e11515c10f
https://www.cnblogs.com/liqiyuan/p/6246870.html
https://github.com/ruanyf/webpack-demos#demo01-entry-file-source