使用 Webpack 拆分模块，以便在 WebWorker 中加载

Question

我有一个使用 webpack 编译的 web 应用程序。我的代码使用的模块之一名为table.js。直到最近，它还只是另一个模块，并已与其他所有内容一起编译到我的 bundle.js 文件中。

现在我需要在 Web Worker 中运行 table.js，因此我需要将它及其依赖项拉入一个单独的文件中，该文件既可以独立加载，也可以由我的其他模块加载。

起初我想在我的webpack.config.js 的entry 中包含table.js。

var config = {
    ...
    entry: {
        app: [ './src/main.js', './src/classes/table.js' ],
        vendors: [],
    },
    ...
}

那没用。然后我想把它像我的供应商捆绑包一样分开。

var config = {
    /* for vendors (and other modules) we have a CDN for */
    addExternal: function (name, globalVar) {
        this.externals[name] = globalVar;
        this.entry.vendors.push(name);
    },

    /* for vendors we don't have a CDN for */
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.entry.vendors.push(name);
    },

    addPlugin: function (plugin) {
        this.plugins.push(plugin);
    },

    entry: {
        app: [ './src/main.js' ],
        vendors: [],
        table: [ __dirname + '/src/classes/table.js' ]
    },

    plugins: [],

    externals: { },

    output: {
        path: __dirname + '/public/dist/',
        filename: 'bundle.js',
        publicPath: '/dist/',
        sourceMapFile: '[file].map'
    },

    resolve: {
        alias: { 'table': './src/classes/table.js' },
        extensions: [ '', '.js', '.jsx' ]
    },
    ...
}

/* add vendors and externals */
...

config.addPlugin(new CommonsChunkPlugin('vendors', 'vendors.js'));
config.addPlugin(new CommonsChunkPlugin('table', 'table.js'));

这似乎将 Table 及其依赖项拉入了 bundle.js、1.bundle.js 的块中。不幸的是，然后调用import Table from 'table' 会导致此错误：

ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (table)

TableStore 和 Table 之间也存在循环依赖关系。 TableStore 需要保留在 bundle.js 中，因为它不应该被加载到 Web Worker 中。以前，当我需要将东西放入单独的块中时，我已经完成了：

if (someThingNeedsRequiring) {
    require.ensure([], () => {
        require('something');
    }
}

使用循环依赖，这似乎不起作用。

/* table.js */
let _inWebWorker = self instanceof Window,
    TableStore = null;

if (!_inWebWorker) {
    require.ensure([], function() { TableStore = require('../stores/table-store'); } );
}

/* table-store.js */
import Table from 'table';

有人能告诉我正确的方法来让我的webpack.config.js 以及如何在我的模块文件中使用我的imports？

Answer 1

在您的 webpack.config.js 文件中更改输出 filename

output: {
    path: __dirname + '/public/dist/',
    filename: '[name].js',
    publicPath: '/dist/',
    sourceMapFile: '[file].map'
},

然后 Webpack 可以在 dist 目录中将您的条目与其名称分开。

Answer 2

（我已经很长时间没有弄清楚这个问题了，而且我已经将近六个月没有接触这个项目了，所以我可能遗漏了一些细节。如果它不起作用，请评论，我会尝试弄清楚我错过了什么。）

webpack.config

事实证明，有两个方便的 JavaScript 包可以满足我的需求：worker-loader 和 workerjs。

npm install --save workerjs worker-loader

我在 webpack.config.js 中添加了这个：

var config = {
    // ...

    worker: {
        output: {
            filename: '[name].worker.js',
            chunkFilename: '[name].worker.js'
        }
    },

    // ...
}

要求（）

为了指定我希望我的类在 WebWorker 文件中运行，我的要求如下所示：

// ecmaScript 6
import TableWorker from 'worker?name=tableRoller!path/to/table';

// ecmaScript 5
var TableWorker = require('worker?name=tableRoller!path/to/table');

TableWorker 只是我用于 table.js 的export default class Table {...} 的变量名。 name=tableRoller 指定生成的输出 [name].worker.js 文件名。例如，我有另一个名为 distCalc.worker.js 的 WebWorker，所以我的 import 看起来像：

import DistWorker from 'worker?name=distCalc!path/to/distWorker';

请注意，在这种情况下，distWorker 只在 WebWorker 中运行，而 Table 用于我的 main.js 入口点和我的 tableRoller.worker.js WebWorker 文件中。

workerjs 和 worker-loader 生成一个新的入口点文件并引入这些类的所有依赖项。 Tobias Koppers (worker-loader) 和 Eugene Ware (workerjs) 是天才。

检测 WebWorker

我的_inWebWorker 检测结果是：

let _inWebWorker = typeof Window === 'undefined';