Webpack web-workers loader无法工作

Question

我正在使用webpack构建一个应用程序，尝试添加一些Web Workers。我正在使用内置插件来加载它们，但是我按照官方仓库的示例（在这里）操作，却无法使其工作。 我的webpack.dev.js文件如下：

import webpack              from 'webpack';
import assign               from 'object-assign';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

import prodCfg              from './webpack.prod.config.js';

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DEBUG = process.env.NODE_ENV !== 'production' ? true : false;
var styles = 'css!less';

Object.assign = assign;

export default function (app) {
  const config = Object.assign(prodCfg, {
    devtool: 'cheap-module-inline-source-map',
    entry:  
     [
      'webpack-hot-middleware/client',
      './client',
      'styles/main.less'
    ],
    module: {
      loaders: [
        {
          test:    /\.jsx?$/,
          exclude: /node_modules/,
          loader:  'babel',
          query:   {
            plugins: [
              [
                'react-transform', {
                transforms: [{
                  transform: 'react-transform-hmr',
                  imports:   ['react'],
                  locals:    ['module']
                }]
              }
              ]
            ]
          }
        },
        {
          test: /\.css$/,
          loader: DEBUG ? 'style!' + styles : ExtractTextPlugin.extract(styles)
        },
        { 
          test: /\.less$/, 
          loader: DEBUG ? 'style!' + styles : ExtractTextPlugin.extract(styles)
        }
      ]
    },
    plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new ExtractTextPlugin("style.css", {allChunks: true })
    ],
    worker: {
      output: {
        filename: "hash.worker.js",
        chunkFilename: "[id].hash.worker.js"
      }
    }
  });

  const compiler = webpack(config);

  app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath}));
  app.use(webpackHotMiddleware(compiler));
}

当我尝试加载文件时，我是这样尝试的：

var Worker = require("worker!worker.js");

它永远找不到文件，webpack只导出bundle.js和style.css文件，看起来worker loader根本没有加载任何东西，或者我不理解loader的逻辑，无论如何，关于这个问题没有太多文档或实施例子。所以我希望有人已经成功实现了这一点，并能为我的问题提供一些帮助。

非常感谢您提前提供的任何帮助！

- Xavi Bonell

Answer 1

你需要将它放在加载器部分 -

在你的webpack配置中，类似于以下内容：

const config = Object.assign(prodCfg, {
...
module: {
  loaders: [
  ...
  { 
      test: /\.less$/, 
      loader: DEBUG ? 'style!' + styles : ExtractTextPlugin.extract(styles)
  },
  { 
      test: /worker\.js$/,
      loader: 'worker'
  }
...

如果你想将其作为Webpack的单独输出，则应该这样处理。

希望有所帮助。

- David Avikasis

---

帮了我很多，谢谢！ 此外，我需要将“library.worker.js”条目添加到webpack配置中。在我的情况下，worker是从外部库中使用的，如果没有“entry”，webpack就不会生成worker文件（webpack根本不知道它被使用）。 - viskin

万一像我这样对webpack毫无头绪的初学者遇到了这个问题，如果在loader部分加载worker-loader，那么你就不需要在require中再次加载它。因此，你只需要require("worker.js")，而不是require("worker!worker.js")。 两者都做的话是行不通的，你也看不到任何错误信息。 - Jon F.

Answer 2

在您提供的示例中，您的这一行代码如下：

var Worker = require("worker!worker.js");

看起来像这样：

var Worker = require("worker!./worker");

请注意，这里有一个./表示相对路径。另外，在调用另一个文件时，不需要使用.js。

您是否有一个名为worker.js的文件与您的共享代码相关联？

- Cymen

---

嗨Cymen，感谢您的快速回复。是的，我尝试了您建议的符号：var Worker = require("worker!./worker"); 但问题在于该文件在webpack的导出结果中根本不存在，因此无法找到该文件。 - Xavi Bonell

@XaviBonell 在你提供的示例中，他们有一个webpack配置，可以发出名为“worker”的捆绑包 - 我认为你可能需要配置webpack来发出常规捆绑包和“worker”捆绑包。请参见https://github.com/webpack/webpack/tree/master/examples/web-worker - 这一点并不明显。 - Cymen

再次感谢您，您提供的链接与我在问题中提供的链接相同，这正是我想做的，生成一个常规的bundle和一个worker bundle，但我真的做不到，应该很容易，对吧？但事实并非如此。无论如何，我在他们的GitHub存储库中开了一个帖子，希望他们能指引我正确的方向！链接 - Xavi Bonell

@XaviBonell 啊！抱歉，我错过了那个。希望你在 GitHub 上得到了答案，并可以在这里发布并接受自己的答案（这将有助于其他试图解决此问题的人）。 - Cymen

@XaviBonell 还有一个可以尝试的方法是使用聊天应用程序Discord——这里有一个活跃的#webpack频道。它是一个免费应用程序，原本是为游戏设计的，但很多人现在用它来进行软件开发（slack的用户限制是10,000个左右，而Discord则没有上限）。 - Cymen

@XaviBonell 我忘了链接到实际的Discord服务器：http://www.reactiflux.com/ - Cymen