webpack package code into different bundle

2024-02-03 17:25:04

Demo4操作手册

本Demo演示如何进行分块打包等较高级的使用

准备环境

初始化环境, cd到demo1目录之后, 执行如下命令:

npm init -y
npm install webpack webpack-cli webpack-dev-server typescript ts-loader -D

新建tsconfig.json, 内容如下:

{
  "compilerOptions": {
    "target": "es5"
  }
}

添加npm命令到package: ‘webpack-dev-server --open’.

L7 require.ensure

当一个应用的代码很多的时候, 我们把所有的代码都打包到一个文件, 似乎显得有点臃肿, 同时考虑到首页加载性能等其他原因, 按照一定规则把代码分开打包是很有必要的.

Webpack会使用require.ensure来定义各个分离的节点.

单个文件分离

在src目录下创建library1.ts和index.ts, 内容如下:

// library1.ts
export class Library {
  hi() {
    console.log('I\'m Library1.')
  }
}
// index.ts
require.ensure(['./library1.ts'], function (require) {
  var lib = require('./library1');
  const ins = new lib.Library();
  ins.hi();
});

新建webpack.config.js, 内容如下:

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'output.js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  }
}

执行webpack即可打包成功, 可以看到dist目录下有output和1.output两个文件.

多个文件分离

在之前文件的基础上新建library2.ts和library3.ts, 内容如下:

// library2.ts
export class Library {
  hi() {
    console.log('I\'m Library2.')
  }
}
// library3.ts
export class Library {
  hi() {
    console.log('I\'m Library3.')
  }
}

修改index.ts内容如下:

require.ensure(['./library1.ts'], function (require) {
  var lib = require('./library1');
  const ins = new lib.Library();
  ins.hi();
});

require.ensure(['./library2.ts', './library3.ts'], function (require) {
  var lib2 = require('./library2');
  const ins2 = new lib2.Library();
  ins2.hi();

  var lib3 = require('./library3');
  const ins3 = new lib3.Library();
  ins3.hi();
});

执行webpack即可打包成功, 可以看到dist目录下有output、1.output和2.output三个文件.

放到浏览器去执行可以看到library2和library3打包进了1.output, 而library1打包进了2.output.

L8 bundle-loader

bundle-loader其实只是对require.ensure做了一个封装, 原理还是一样的, 安装:

npm install bundle-loader -S

修改webpack.config.js如下:

module.exports = {
  entry: './src/bundle.ts',
  output: {
    filename: 'output.js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'bundle-loader'
          }, {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

在src目录新建bundle.ts, 内容如下:

require('./library1')(lib => {
  const ins = new lib.Library();
  ins.hi();
});
require('./library2')(lib => {
  const ins = new lib.Library();
  ins.hi();
});
require('./library3')(lib => {
  const ins = new lib.Library();
  ins.hi();
});

打包结果是library的1、2、3分别打包进了output的2、3、4.

L9 SplitChunksPlugin

当我们多个打包文件依赖同一个包时, 如果不是把所有包都分开打包, 那么很多被依赖的包可能被重复打包进其他的包, 这是时候就需要对公共代码进行单独打包了.

实际上之前各种资料介绍的都是CommonsChunkPlugin, 而她从V4开始已经被移除了, 所以下面介绍SplitChunksPlugin的使用.

实际上这一步我没有完成, 后面有时间再继续更新吧......

码农公寓