javascript – Webpack web-workers loader无法正常工作

我正在使用webpack构建应用程序,我正在尝试添加一些Web工作者,我正在使用内置插件来加载它们,但我按照示例here,官方存储库,我无法使用它工作.
我的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,看起来工作者加载器根本没有加载任何东西,或者我只是不明白加载器背后的逻辑,无论如何没有太多关于这个或实现的例子的文档.所以我希望有人成功地实现了这一点,并且可以解释我的问题.

任何帮助都会非常欢迎！非常感谢你提前！

解决方法:

你需要把它放在装载机部分 –

在你的webpack配置中,类似于

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

那么你应该把它看作webpack的单独输出.

希望能帮助到你

标签：javascript,webpack,web-worker,webpack-dev-server
来源： https://codeday.me/bug/20190824/1705781.html