webpack指南 - 初探

2017-06-23 本文已影响27人饭团爸爸v5

原文链接
翻译作者：饭团爸爸

开始

可能你已经知道 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

webpack指南 - 初探

开始

基础安装

src/index.js

index.html

创建一个捆绑

project

src/index.js

dist/index.html

ES2015 模块

使用配置项

project

webpack.config.js

NPM 脚本

结语

project

猜你喜欢

热点阅读