- 原文链接
- 翻译作者：饭团爸爸
开始
可能你已经知道 webpack 被用来编译 JavaScript 的 modules(模块），一旦安装成功，你便能以 CLI 或者 API 的形式使用 webpack。如果你是一名 webpack 的新手，那么建议先读 核心概念 以及 竞品对比 去学习为什么你会用 webpack，而不是其它被社区淘汰的竞品。
基础安装
首先我们创建一个文件夹，并且用 npm 初始化，然后在本地安装 webpack:
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
现在我们将创建如下的文件目录结果
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
function component() {
var element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
在这个例子里，存在隐式的依赖通过 <script> 标签，我们的 index.js 文件依赖的 lodash 在运行之前就已经被包含在页面之中。 这是因为 index.js 从未声明需要 lodash ，它假设在它使用的时候，刚刚好有一个全局变量 _ 是存在的。
这样管理 JavaScript 项目存在着如下几个问题
- 没有对外部库做显示的依赖声明
- 如果依赖缺失，或者引入了错误的顺序，那么应用程序将无法正确执行
- 如果一个依赖被包含，但是没有被使用，但是浏览器还是会强制地下载没有必要的代码片段。
好的，现在让我们使用 webpack 来管理这些问题。
创建一个捆绑
首先我们要对目录做一些微调，从分发代码 /dist 中拆分源码 /src . "source" 文件夹中保存我们编辑的代码，"distribution" 文件中存放经过构建器处理过后最小化和优化过的output，他们将最终被浏览器所加载。
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
为了能在index.js中捆绑lodash，我们需要现在本地安装对应的库，方法如下
npm install --save lodash
然后将其在我们的 script (脚本)中引入
src/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
现在，因为我们将捆绑我们的 script，我们需要更新我们的index.html文件。让我们移除 lodash 的 <script>,现在我们import它，然后修改其它<script>去加载这个绑定，用于替代原始的/src文件。如下
dist/index.html
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="bundle.js"></script>
</body>
</html>
在这个步骤，index.js显示的加载了lodash在当前环境，然后指定其为_ (这里没有全局代码污染)。通过描述一个模块需要的依赖，webpack 可以使用这些信息去构建一个依赖图。然后使用这个依赖图去生成一个优化后的捆(bundle,后续使用 bundle 直接称呼 webpack 打包生成的捆)，在这个 bundle 中脚本将被会以正确的顺序执行。
根据上述的说明，我们现在将我们的脚本作为入口接口，将bunlde.js作为输出来运行webpack。具体的执行命令如下
./node_modules/.bin/webpack src/index.js dist/bundle.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
你的输出可能会有上述会有一点不同，但只要构建成功都是可以正常执行的。
打开index.html文件在你的浏览器中，如果一切正常的话，你会看见如下文本:'Hello webpack'。
ES2015 模块
尽管import和export表达式还不能被大多数浏览器所支持，webpack 依旧支持它们。其中的原理在于，webpack 实际上转换这些代码以便老的浏览器依旧可以运行他们。如果你阅读dist/bundle.js文件，你可以看到 webpack 如何处理它们，那是非常精巧的。
使用配置项
因为大部分项目都会需要一个更为复杂的步骤，所以 webpack 支持一个 配置文件。比起使用在终端中使用大量的命令行，使用配置文件是一个更为高效的方式，所以现在让我创建一个去替代终端命令。首先我们修改项目结构
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在让我们使用配置文件再一次运行配置文件
./node_modules/.bin/webpack --config webpack.config.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
If a webpack.config.js is present, the webpack
如果 webpack.config.js 是存在的，webpack命令行工具会使用它作为默认配置文件，如果我们使用--config选项，我们可以通过文件名称任意指定一个配置文件。这对于一个配置项复杂到需要拆分的项目来说，是十分有用的。
配置文件比起命令行支持更加灵活的的功能。我们可以指定特定的加载规则，插件，解析选项和其它增强功能。参考配置文件文档去了解更多相关信息。
NPM 脚本
鉴于在命令行中运行 webpack 的命令比较长，我们可以使用一些简单快捷方式。我们现在可以在package.json文件中添加如下 npm 脚本。
{
...
"scripts": {
"build": "webpack"
},
...
}
现在我们只需要使用npm run build命令就可以替代冗长的 webpack 命令。添加这些在script中，我们可以通过名称引用本地已经安装的包，而不是写出完整的路径。这个方法允许我们直接使用webpack而不是使用node_modules/webpack/bin/webpack.js,并且它已经成为大多数基于 npm 的项目用来简化 webpack 命令的标准。
现在让我们来允许如下命令，你将会看到如下结果
npm run build
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
结语
现在你已经有了一个基础的构建项目，现在你应该钻研[核心概念]和[配置文件]以便能更好地理解 wepack 的设计。API章节专注于介绍 webpack 提供的接口。或者如果你想更好地通过示例学习，在后续的章节中，你面对的 demo 基本上都是基于如下结构的.
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
