Webpack介绍

2020-04-06 本文已影响0人张培_

What is webpack

webpack是一个static module bundler(静态模块打包器)。当webpack处理你app的时候，webpack会在内部创建一个dependency graph，这个graph中会列出app中所有的module，以及module之间的依赖关系。使用这个graph创建出来一个或者多个bundles

What is module

通常我们可以将一个文件理解成是一个module。但是module通俗的解释就是：

module指的是独立的可重用的最小代码单元，module中的代码可以被export出去，module也可以引用其他的module。

简而言之，module中包含三个概念：

独立的代码单元module
module可以被暴露
module也可以引用其他module

ES6 module

在ES6之前，虽然JS也有module，但是module的实现（import、export）都是使用第三方库实现的，JS并没有内置的module feature。

因此当不使用第三方库的时候（requirejs），我们根本没有办法在一个module（JS文件）中引用另外一个module（js文件），因此只能使用多个<script> tag, 这样会发送很多请求不利于页面的perfermance。

因此ES6终于引入了module，俗称ES6 module，支持module的import/export，相当于以后可以直接使用import export不需要借助其他任何工具，但是并不是所有的浏览器都实现了ES6 module，所以。。。

通常的兼容做法就是借助transpiler(babel), 将你的ES6 import编译成ES5。

例子

// ES6

import Lodash from 'Lodash';

// Babel compile

"use strict";

var _Lodash = _interopRequireDefault(require("Lodash"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

Why we need bunlder

现代的Web肯定需要很多和用户交互的地方，因此纯HTML已经不能够满足我们的需求了，需要在HTML中加JS，那么通常通过script tag, 将你的JS文件加入到HTML中。

如果你的JS文件只有50行，还好，但是随着APP的功能越来越多，JS的代码量肯定越来越大，如果最后这个JS文件需要包含几十万行代码，就太可怕了。。

那么你肯定会说，不如果我们将这些代码分散在多个JS文件里，在HTML中多引入几个script就OK不是？如果这么做

首先页面需要加载这么多的文件，perfermance肯定会受影响
除此之外，你还得合理安排你的script标签的顺序，如果B import scriptA，那么script A必须在scriptB之前

更好的方法是，如果每个文件都能以某种方式告诉我们它还需要什么其他文件，然后我们就可以利用这个来安排文件引入的先后顺序

webpack就会使用这种方式构建dependency graph(描述所有的文件和他们的依赖)，然后将这些文件全部bundle起来。

How does webpack work

当你定义一个webpack的入口文件，webpack就会从这里开始开始处理.我们俗称为compile过程

递归地遍历每个文件的依赖关系，并解析每个依赖关系，直到遍历完成为止。

webpack的resolver会首先check所有依赖的文件是否存在，如果都存在，然后将每一个文件都转换成一个module，然后为这些module创建dependency graph

将所有的module都bundle在一个文件中，这个文件就是output
同时webpack会创建并保留所有module的注册表，其中可能包含module所在的位置，因此可以在需要时正确调用/执行它们。

Loader

webpack的目的是将你所有的dependency全部bundle在一起，那么你的dependency可能是JS文件，也可能是一些assets（picture）。

本身bundler只是用来bundle JS文件的，那么对于其他类型的文件和assets， webpack需要在他们被bundler处理之前做一些预处理工作，将这些文件翻译成bundler能够处理的类型。

这个预处理工作就由loader完成，因为有loader，所以webpack可以支持bundle多种多样的文件。

Loader可以将各种其他类型的文件翻译成JS或者data URLs

Plugins

plugins可以截取webpack的runtime events, 因为webpack给所有的runtime events都提供了hook，我们可以利用hook去实现plugin的功能。

Plugin实现

每一个plugin必须有一个apply方法，这个apply方法会被webpack compiler调用，就可以帮助plugin获取entire compilation lifecycle

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log('The webpack build process is starting!!!');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

Plugin使用

我们可以在webpack的config文件中配置插件，webpack的config对象中有一个参数plugins，他的类型是数组，每一个元素必须是plugin的new instance

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};