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的使用.

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

巴特西

webpack package code into different bundle