javascript - Webpack web-workers loader not working - Stack Overflow

admin管理员组

文章数量:1302904

I'm building an app using webpack and I'm trying to add some web workers, I'm using a built-in plugin to load them, but I followed the example here, the official repository, and I couldn't make it work. My webpack.dev.js looks like this:

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 piler = webpack(config);

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

and when I try to load the file I try it like this:

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

It would never find the file, the only files exported by webpack are bundle.js and style.css, it looks like the worker loader is not loading anything at all, or maybe I just don't understand the logic behind the loader, anyway there isn't much documentation about this nor implemented examples. So I hope someone had implemented this successfully and can shed some light on my problem.

Any help would be very weled! Thank you very much in advance!

I'm building an app using webpack and I'm trying to add some web workers, I'm using a built-in plugin to load them, but I followed the example here, the official repository, and I couldn't make it work. My webpack.dev.js looks like this:

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 piler = webpack(config);

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

and when I try to load the file I try it like this:

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

It would never find the file, the only files exported by webpack are bundle.js and style.css, it looks like the worker loader is not loading anything at all, or maybe I just don't understand the logic behind the loader, anyway there isn't much documentation about this nor implemented examples. So I hope someone had implemented this successfully and can shed some light on my problem.

Any help would be very weled! Thank you very much in advance!

• javascript
• webpack
• web-worker
• webpack-dev-server

Share Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 4, 2016 at 17:54 Xavi BonellXavi Bonell 9111 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You need to put it in the loaders section -

in your webpack config, something like

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

then you should see it as a separate output of webpack.

Hope it helps

In the example you linked to, your line here:

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

Looks like this:

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

Note that there is a ./ to indicate a relative path. Also, you do not need the .js when calling require on another file.

Do you have a file called worker.js relative to your shared code?

2025 Answer

1. Install worker-loader:

npm i -D worker-loader

2. Config in rules:

{
  test: /\.worker\.js$/,
  use: {
    loader: 'worker-loader',
    options: {
      filename: '[name].[contenthash].worker.js', //? Fix not cacheable file
    },
  },
},

3. Rename your file end with *.worker.js

本文标签： javascriptWebpack webworkers loader not workingStack Overflow