的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網工裝載機不工作

回答

相關問題