Webpack快速上手指南

Webpack用于编译JavaScript模块。安装以后，可以通过CLI或API使用它。如果你对webpack还有点陌生，可以先看看它的核心概念以及一些比较，了解为什么要使用它。

基本的设置

首先，要创建一个目录，使用npm初始化，然后本地安装webpack：

代码语言：javascript复制

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

此时的目录结果及其内容如下：

项目目录

代码语言：javascript复制

 webpack-demo
  |- package.json
  |- index.html
  |- /src
    |- index.js

src/index.js

代码语言：javascript复制

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

代码语言：javascript复制

<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更合理地管理脚本。

创建打包文件

首先，稍微改一改目录结构，把源代码（/src）从“分发”（distribution）代码（/dist）中分离出来。所谓源代码，就是我们要编写的代码。而分发代码则是通过构建压缩和优化后的输出，也就是最终要由浏览器加载执行的代码。

项目目录

代码语言：javascript复制

 webpack-demo
  |- package.json
  |- /dist
    |- index.html
- |- index.html
  |- /src
    |- index.js

要把依赖的lodash打包到index.js，需要本地安装这个库：

代码语言：javascript复制

npm install --save lodash

然后在脚本中导入：

src/index.js

代码语言：javascript复制

  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());

好，既然接下来要使用打包文件，还得修改index.html。先删掉引用lodash的<script>`标签，再修改另一个`<script>标签，把引用/src中的源文件改成引用打包文件：

dist/index.html

代码语言：javascript复制

 <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就可以利用该信息构建一张依赖关系图。然后再根据这张图生成优化的打包文件，而且确保代码的执行顺序。

明白这些后，我们运行webpack，把源脚本作为“入口”，把bundle.js作为输出：

代码语言：javascript复制

./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除了import和export语句，什么也不会动。如果你还在源代码里使用了其他ES2015语法，那必须要使用Babel或Bublé等编译器来编译。要了解webpack支持的各种模块语言，请参考Module API。

使用配置文件

多数项目都比前面的示例复杂，因此webpack支持配置文件。配置文件比在终端命令行输入一堆命令更有效率，下面我就看一看怎么用配置文件替代上面使用CLI选项：

项目目录

代码语言：javascript复制

 webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

代码语言：javascript复制

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

接下来再次运行构建命令，但这次指明使用配置文件：

代码语言：javascript复制

./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]

如果webpack.config.js存在，webpack默认会使用它。这里使用了--config选项，是为了告诉你可以像这样指定任意名称的配置文件。对于复杂的需要分成多个文件的配置，这个选项就有用了。

配置文件其实远比简单地替代CLI输入灵活。比如可以在配置文件中指定加载器规则、指定插件、解析选项，还有实现其他操作。请参考配置文件了解更多信息。

NPM脚本

显然，像前面那样在CLI中运行本地安装的webpack有点麻烦，那就想办法简化一下在package.json中添加如下npm脚本：

package.json

代码语言：javascript复制

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

这样，只要运行npm run build就相当于运行前面那一大串命令了。看到没，在scripts中，可以直接引用本地安装的npm包（webpack），而无需写出这个包的完整相对路径。这种便利特性是大多数npm项目的标准实现，因此我们可以直接引用webpack，而不用写./node_modules/.bin/webpack。

好，下面就运行在npm脚本中定义的这个命令试试吧：

代码语言：javascript复制

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]

在npm run build后面加两个短线作为分隔，可以给webpack传入自定义参数，比如：npm run build -- --colors。

小结

学会了基本的构建技能，下一步就该晋级学习Asset Management了，其中包括如何使用webpack管理图片和字体等资源。此时此刻，你的项目结构应该是这个样子的：

项目目录

代码语言：javascript复制

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

如果你使用npm 5，那这个目录里还会有一个package-lock.json文件。

想了解webpack的设计思想？移步到基本概念和配置页面。此外，API详细介绍了webpack提供的各种接口。

webpack npm lodash 打包 html

0 人点赞