webpack package code into different bundle

Demo4 Manual

This Demo shows how to block package and other more advanced use

Preparing the environment

Initialize the environment, then to the demo1 cd directory, execute the following command:

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

New tsconfig.json, reads as follows:

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

Commands to add npm package: 'webpack-dev-server --open'.

L7 require.ensure

When the code is a lot of applications, we put all the code is packaged into a file, it seems a bit bloated, taking into account other causes of Home loading performance, according to certain rules separate from the code package is necessary.

Webpack use require.ensure to define respective separate nodes.

Separation single file

Creating library1.ts and index.ts in the src directory, as follows:

// 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();
});

New webpack.config.js, reads as follows:

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

Successful implementation of webpack you can pack up, you can see there are two output files and 1.output dist directory.

Separate multiple files

New library2.ts and library3.ts on the basis of the file before, reads as follows:

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

Modify index.ts reads as follows:

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();
});

Execution webpack you can pack up, you can see output, 1.output and 2.output three files in the dist directory.

Into the browser to perform and can be seen library2 library3 packed into the 1.output, and library1 packaged into 2.output.

L8 bundle-loader

bundle-loader is only for require.ensure made a package, the principle is still the same, the installation:

npm install bundle-loader -S

Modify webpack.config.js as follows:

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'
          }
        ]
      }
    ]
  }
}

In the src directory New bundle.ts, reads as follows:

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();
});

The result is a packed library were packed into the output 1,2,3 2,3,4.

L9 SplitChunksPlugin

When we rely more packed files in the same package, the package, if not all packages are separate, so a lot is dependent on the package may be repeated packaged into other packages, this is the time you need for a common code individually packaged.

In fact before the introduction of various types of information are CommonsChunkPlugin, and she V4 from the beginning has been removed, so the following describes the use of SplitChunksPlugin.

Actually I did not finish this step, followed by a time to continue to update it ......