的WebPack网工装载机不工作

我使用的WebPack建立一个应用程序，我想补充一些网络工作者，我使用的是内置插件加载它们，但我也跟着例如here中，官方存储库，我不能让它工作。我webpack.dev.js看起来是这样的：的WebPack网工装载机不工作

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，它看起来像工人加载程序根本不加载任何东西，或者我只是不明白加载程序背后的逻辑，无论如何没有太多关于这个文档或实现的例子。所以我希望有人能够成功实施这个方案，并且能够解决我的问题。

任何帮助将是非常欢迎！非常感谢您提前！

来源

2016-03-04 Xavi Bonell

在您链接到的例子，你在这里行：

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

是这样的：

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

请注意，有一个./指示相对路径。另外，在另一个文件上调用require时，不需要.js。

你有一个名为worker.js相对文件到您的共享代码？

来源

2016-03-04 18:09:25 Cymen

嗨Cymen，谢谢你的快速回答。是的，我尝试了你建议的符号：var Worker = require（“worker！.// worker”）;但问题是文件在webpack的导出结果中完全不存在，所以没有办法找到该文件 –

@XaviBonell因此，在您的链接示例中，它们具有一个webpack配置，该配置会发出名为'worker ' - 我想你可能需要配置webpack来发出你的常规包和一个'工作者包'。见https://github.com/webpack/webpack/tree/master/examples/web-worker - 这一点都不明显。 – Cymen

再次感谢您提供的链接与我在我的问题上链接的链接相同，所以这正是我想要做的，生成一个常规包和一个工作人员，但我不能这样做，应该是容易，对吗？那不是。无论如何，我在他们的GitHub仓库中打开了一个具有相同问题的线程，希望他们能够指引我正确的方向！ [链接]（https://github.com/webpack/webpack/issues/2138） –

你需要把它放在装载机节 -

在你的WebPack的配置，像

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

，那么你应该把它看作的WebPack的一个单独的输出。

希望它有帮助

来源

2016-06-22 17:26:35

帮了我很多，谢谢！另外，我需要添加'library.worker.js'条目到webpack配置。在我的情况下，worker是从外部库中使用的，并且没有'entry'webpack不会生成worker文件（webpack根本不知道它使用了它）。 – viskin

为了防止像我这样的完整的webpack初学者遇到这种情况，如果您在加载程序部分加载worker-loader，则不再需要将它加载到require中。因此，而不是'require（“worker！worker.js”）'，你只需要'require（“worker.js”）''。做这两个都不行，你不会看到任何错误信息。 –

的WebPack网工装载机不工作

回答

相关问题