webpack v4.30.0（5）官方说明文档起步（tree shaking章节承接起始章节）

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。

它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。

这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。

新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.

重点提示：由于本章节承接文档中起步阶段，又由于第一片文章包含了（文档指南、安装、起步管理资源），所以从起步开始演示讲解：

起步：

webpack 用于编译 JavaScript 模块。

一旦完成安装，你就可以通过 webpack 的 CLI 或 API 与其配合交互。

如果你还不熟悉 webpack，请阅读核心概念和打包器对比，了解为什么你要使用 webpack，而不是社区中的其他工具。

基本安装：

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo && cd webpack-demo

npm init -y 

npm install webpack webpack-cli --save-dev

执行以上命令后的导入下目录结构：（从下图中可以看出，我已经建立好目录，所以直接从第二个命令开始）

执行命令后我们的目录结构是这样的：

现在我们将创建以下目录结构、文件和内容：

index.js文件中代码如下：

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}
document.body.appendChild(component());

index.html文件中代码如下：

起步

我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。

package.json文件中代码如下（webpack站点代码中，+号表示新增此行，- 号表示删除此行），所以更新为以下：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
"private": true,
    "scripts": {
      "test": "echo "Error: no test specified" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.1"
    },
    "dependencies": {}
  }

在此示例中，在这个设置中，index.js 显式要求引入的 lodash 必须存在，然后将它绑定为 _（没有全局作用域污染）。通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的，会以正确顺序执行的 bundle。

可以这样说，执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。

Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）：

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ npx webpack
Hash: 6df9c0f2b5f65478e777
Version: webpack 4.30.0
Time: 5213ms
Built at: 2019-04-27 15:52:45
  Asset      Size  Chunks             Chunk Names
main.js  70.3 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 259 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$

在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：'Hello webpack'。

输出可能会稍有不同，但是只要构建成功，那么你就可以继续。并且不要担心。

模块
ES2015 中的 import 和 export 语句已经被标准化。虽然大多数浏览器还无法支持它们，但是 webpack 却能够提供开箱即用般的支持。
事实上，webpack 在幕后会将代码“转译”，以便旧版本浏览器可以执行。如果你检查 dist/bundle.js，你可以看到 webpack 具体如何实现，这是独创精巧的设计！除了 import 和 export，webpack 还能够很好地支持多种其他模块语法，更多信息请查看模块 API。
注意，webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性，请确保你在 webpack 的 loader 系统中使用了一个像是 Babel 或 Bublé 的转译器。

使用一个配置文件

在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件webpack.config.js：

配置文件代码：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
现在，让我们通过新配置文件再次执行构建：npx webpack --config webpack.config.js

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ npx webpack --config webpack.config.js
Hash: 11dc0c2e40e3a9f11ba6
Version: webpack 4.30.0
Time: 524ms
Built at: 2019-04-27 16:26:48
    Asset      Size  Chunks             Chunk Names
bundle.js  70.3 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 259 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$

比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。了解更多详细信息，请查看配置文档。

NPM 脚本(NPM Scripts)

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：

package.json修改为：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm 的 scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本（如果必要，每个 flag 都带有 --config 标志）。

现在运行以下命令，然后看看你的脚本别名是否正常运行：

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ npm run build

> webpack-demo@1.0.0 build D:webpack-demo
> webpack

Hash: 11dc0c2e40e3a9f11ba6
Version: webpack 4.30.0
Time: 529ms
Built at: 2019-04-27 16:31:43
    Asset      Size  Chunks             Chunk Names
bundle.js  70.3 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 259 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$

通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。

结论

现在，你已经实现了一个基本的构建过程，你应该移至下一章节的 Asset Management 指南，以了解如何通过 webpack 来管理资源，例如图片、字体。此刻你的项目应该和如下类似：

如果你使用的是 npm 5，你可能还会在目录中看到一个 package-lock.json 文件。