一、webpack 简介

1.1 webpack 是什么

实质上，webpack 是一个用于古代 JavaScript 应用程序的 动态模块打包工具（module bundler）。当 webpack 解决应用程序时，它会在外部从一个或多个入口点构建一个 依赖图（dependency graph），而后将你我的项目中所需的每一个模块组合成一个或多个 bundles，它们均为动态资源，用于展现你的内容。

1.2 webpack 五个外围概念

• 入口（entry）
• 输入（output）
• loader
• 插件（plugin）
• 模式（mode）

1.2.1 Entry

入口（Entry）批示 webpack 以哪个文件为入口终点开始打包，剖析构建外部依赖图。

1.2.2 Output

输入（Output）批示 webpack 打包后的资源 bundles 输入到哪里去，以及如何命名。

1.2.3 Loader

Loader 让 webpack 可能去解决那些非 JavaScript 文件（webpack 本身只了解 JavaScript）

1.2.4 Plugins

插件（Plugins）能够用于执行范畴更广的工作。插件的范畴包含，从打包优化和压缩，始终到从新定义环境中的变量等。

1.2.5 Mode

模式（Mode）批示 webpack 应用相应模式的配置。

• development：开发环境
• production：生产环境

二、webpack 的初体验

2.1 初始化配置

2.1.1 初始化 package.json

新建文件夹 webpack_demo，控制台输出 npm init，一路回车

初始化结束生成 package.json 文件

2.1.2 下载并装置 webpack

输出指令：

npm install webpack webpack-cli -g 全局装置
npm install webpack webpack-cli -D 本地装置 

2.2 编译打包利用

2.2.1 创立文件

在 src 文件夹下创立 index.js 文件，作为 webpack 的入口文件

2.2.2 运行指令

开发环境指令：

webpack src/index.js -o build/built.js --mode=development

build 文件夹下生成 built.js 打包后的文件

性能：webpack 可能编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能辨认的语法。

生产环境指令：

webpack src/index.js -o build/built.js --mode=production

性能：在开发配置性能上多了一个代码压缩

生产环境下生成的 built.js 被压缩