webpack 的 bundle loader

安装

npm i bundle-loader --save

用法

webpack.config.js

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

当你引用 bundle-loader 时，chunk 会被浏览器请求(request)。

file.js

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

为了 chunk 在浏览器加载（以及在获取其导出）时可用时， 你需要异步等待。

bundle((file) => {
  // use the file like it was required
  const file = require('./file.js')
});

上述代码会将 require('file.js') 包裹在一段 require.ensure 代码块中

可以添加多个回调函数。它们会按照添加的顺序依次执行。

bundle(callbackTwo)
bundle(callbackThree)

当依赖模块都加载完毕时, 如果此时添加一个回调函数，它将会立即执行。

选项(options)

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

当你使用 bundle-loader 时，文件会被请求(request)。如果想让它按需加载(request it lazy)，请使用：

webpack.config.js

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

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

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

ℹ️ 只有调用 load 函数时，chunk 才会被请求(request)

name

可以通过配置中 name 选项参数，来设置 bundle 的名称。 查看 文档。

webpack.config.js

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

:warning: 一旦 loader 创建了 chunk，它们将遵循以下命名规则 output.chunkFilename 规则，默认是 [id].[name]。这里 [name] 对应着配置中 name 选项参数设置的 chunk 名称。

示例

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

一般情况下，chunk 会使用上面的 filename 规则，并根据其对应的 [chunkname] 命名。

然而，来自 bundle-loader 中的 chunk 会使用 chunkFilename 规则命名。因此，打包后的示例文件最终将生成为 my-chunk.1.js 和 file-2.js。

当然，你也可以在 chunkFilename 添加哈希值作为文件名的一部分，这是因为在 bundle 的配置选项中放置 [hash] 不会生效。

维护人员

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov