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

Question

我有一个用 webpack 编译的网络应用程序。我的代码使用的模块之一名为 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 以及如何在我的模块文件中使用我的 import 吗？

Answer 1

在您的webpack.config.js文件

中更改输出文件名

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 文件中指定我的 class 为运行，我的要求如下所示：

// 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 生成一个新的入口点文件并引入那些 classes 的所有依赖项。 Tobias Koppers (worker-loader) 和 Eugene Ware (workerjs) 是天才。

正在检测 WebWorker

我的_inWebWorker检测是：

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

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

Use Webpack to split out a module so that it can be loaded in a WebWorker

javascript

node.js

webpack

webpack.config

要求（）

正在检测 WebWorker