webpack 初窥

Veröffentlicht am

webpack 解决了什么问题？

webpack is a tool to build JavaScript modules in your application.
……
webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

简单来说就是包管理，并且对随之来的的新问题包大小进行优化。

因为 JS 本身没有 package 的概念，最初始的方式是通过 <script> 的方式来加载，这种方式很容易出问题，比如如果三方库还没加载下来，代码就执行了，就会出错。有了 node 之后，npm 提供了包管理，webpack 就是提前把这些依赖关系处理好，生成一个 bundle.js 进行使用。

之前的三方库使通过 script tag 来进行应用

1
2
3
4
5
6
7
8
9
10
11
// index.js
function component () {
  var element = document.createElement('div');
  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}
document.body.appendChild(component());
1
2
3
4
5
6
7
8
9
10
<-- index.html -->
<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

使用以下命令，通过 npm 安装 lodash, 使用了 webpack 之后，配合 import/export 关键字 webpack 会提前处理好依赖关系，生成一个 bundle.js。

1
2
npm install --save lodash
./node_modules/.bin/webpack app/index.js dist/bundle.js
1
2
3
4
5
6
7
8
9
import _ from 'lodash';
function component () {
  var element = document.createElement('div');
  element.innerHTML = _.join(['hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>webpack demo</title>
  </head>
  <body>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

这样各种包的依赖关系在用户加载的时候就已经确定了，开发人员在开发的时候也不容易犯错。

webpack 带来了什么新问题？

提前生成一个已经处理好依赖关系的 bundle.js 确实有很多好处，但是也带来了一个问题，如果所有 JS 代码都在一个文件里，那这个问题件会很大，用户首次加载会耗时比较久，好在 webpack 也提供了 Code Split 来解决这个问题，我之后再研究一下。