1. Bundle Loader

Bundle loader for webpack

1.1. 安装

npm i bundle-loader --save

1.2. 用法

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.bundle\.js$/,
        use: 'bundle-loader'
      }
    ]
  }
}

当需要这个bundle，请求这个chunk

file.js

import bundle from './file.bundle.js';

等待chunk可用(并获得导出)，您需要异步等待它。

bundle((file) => {
  // 就像文件被require一样使用它。
  const file = require('./file.js')
});

包装require('file.js')在require.ensure块中。

可以添加多个回调。他们将按照添加的顺序被执行。

bundle(callbackTwo)
bundle(callbackThree)

如果在加载了依赖项之后添加了一个回调，那么将立即调用它。

1.3. 选项

名称	类型	默认值	描述
`lazy`	`{Boolean}`	`false`	异步加载导入的包
`name`	`{String}`	`[id].[name]`	为导入的包配置一个自定义的文件名

1.3.1. lazy

当require bundle-loader时，这个文件将被请求。如果想要懒加载它，使用：

webpack.config.js

{
  loader: 'bundle-loader',
  options: {
    lazy: true
  }
}

import bundle from './file.bundle.js'

bundle((file) => {...})

[info] 在调用函数之前，chunk不会被请求。

1.3.2. name

使用name选项参数为bundle设置名字。参见文档.

webpack.config.js

{
  loader: 'bundle-loader',
  options: {
    name: '[name]'
  }
}

[warning] 警告:

loader创建chunk，会根据output.chunkFilename 规则对它命名, 默认为 [id].[name]。这里的[name]对应于name选项参数中设置的chunk名。

1.4. 示例

import bundle from './file.bundle.js'

webpack.config.js

module.exports = {
  entry: {
   index: './App.js'
  },
  output: {
    path: path.resolve(__dirname, 'dest'),
    filename: '[name].js',
    // 或者其他格式
    chunkFilename: '[name].[id].js',
  },
  module: {
    rules: [
      {
        test: /\.bundle\.js$/,
        use: {
          loader: 'bundle-loader',
          options: {
            name: 'my-chunk'
          }
        }
      }
    ]
  }
}