bundle-loader

安装

npm i bundle-loader --save

用法

// 当你引用 bundle 的时候，chunk 会被浏览器加载。
var waitForChunk = require("bundle-loader!./file.js");

// 为了等待 chunk 的加载完成 (而且为了拿到 exports 输出)
// 你需要异步去等待它
waitForChunk(function(file) {
    // 这里可以使用file，就像是用下面的代码require进来一样
    // var file = require("./file.js");
});
// 将 require 包裹在 require.ensure 的代码块中

// Multiple callbacks can be added. They will be executed in the order of addition.
waitForChunk(callbackTwo);
waitForChunk(callbackThree);
// If a callback is added after dependencies were loaded, it will be called immediately.

当你引用 bundle 的时候，chunk 会被浏览器加载。如果你想它懒加载，请用：

var load = require("bundle-loader?lazy!./file.js");

// bundle 不会被加载，除非你调用了 call 函数
load(function(file) {

});

name query parameter

你可能会使用 name 查询参数给 bundle 设置名称。 请查看文档.

Note chunks created by the loader will be named according to the output.chunkFilename rule, which defaults to [id].[name]. Here [name] corresponds to the chunk name set in the name query parameter.

Example:

require("bundle-loader?lazy&name=my-chunk!./file.js");
require("bundle-loader?lazy&name=[name]!./file.js");

And the webpack configuration:

module.exports = {
   entry: { ... },
   output : {
      path : ...,
      filename : '[name].js',
      chunkFilename : '[name]-[id].js', // or whatever other format you want.
   },
}

Normal chunks will show up using the filename rule above, and be named according to their chunkname. Chunks from bundle-loader, however will load using the chunkFilename rule, so the example files will produce my-chunk-1.js and file-2.js respectively.

You can also use chunkFilename to add hash values to the filename, since putting [hash] in the bundle query parameter does not work correctly.

Maintainers

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

原文：https://webpack.js.org/loaders/bundle-loader/