使用Webpack拆分模塊，以便可以將其加載到WebWorker中

Question

我有一個web應用程序，我用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'調用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

事實證明，有兩個方便的dandy 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（工人裝載者）和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可以將您的條目與dist目錄中的名稱分開。