Question

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

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

首先，我想在我的table.js webpack.config.js中添加entry。

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

事实证明，有两个方便实用的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 WebWorker文件中都使用tableRoller.worker.js。< / p>

workerjs和worker-loader生成一个新的入口点文件，并提取这些类的所有依赖项。 Tobias Koppers（工人装载者）和Eugene Ware（工人家庭）是天才。

检测WebWorker

我的_inWebWorker检测是：

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

Answer 2

在 webpack.config.js 文件中更改输出文件名

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

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

使用Webpack拆分模块，以便可以将其加载到WebWorker中

2 个答案:

webpack.config

需要（）

检测WebWorker