錯誤[預處理]：無法加載「webpack」！ （[email protected]; [email protected]）

Question

我試圖讓我的業績測試運行webpack@^2.2.1和karma@1.4.1。但我得到的是這樣的錯誤：

ERROR [preprocess]: Can not load "webpack"! 
    Error 
    at webpack (/Users/plano/S/plano/projects/scheduler.frontend.ng2/node_modules/webpack/lib/webpack.js:19:9) 
    at new Plugin (/Users/plano/S/plano/projects/scheduler.frontend.ng2/node_modules/karma-webpack/lib/karma-webpack.js:65:18) 
    at invoke (/Users/plano/S/plano/projects/scheduler.frontend.ng2/node_modules/di/lib/injector.js:75:15) 
    ... 

所有的解決方案，我發現是有關karma@0.12.x（例如this github issue和this stackoverflow quertion）的錯誤。我在1.4.1上，所以他們對我沒有幫助。

This post告訴我從webpack config中刪除entry: {}。我的webpack配置中沒有entry: {}。

根據this stackoverflow answer自從2.2.0-rc.4以來這是一個webpack問題。所以我試了2.2.0-rc.3。沒有改變。

我karma.conf.js：

'use strict'; 

module.exports = config => { 
    config.set({ 
     autoWatch: true, 
     browsers: ['Chrome', 'PhantomJS'], 
     files: [ 
      '../node_modules/es6-shim/es6-shim.min.js', 
      'karma.entry.js' 
     ], 
     frameworks: ['jasmine'], 
     logLevel: config.LOG_INFO, 
     phantomJsLauncher: { 
      exitOnResourceError: true 
     }, 
     port: 9876, 
     preprocessors: { 
      'karma.entry.js': ['webpack', 'sourcemap'] 
     }, 
     reporters: ['dots'], 
     singleRun: true, 
     webpack: require('../webpack/webpack.test.js'), 
     webpackServer: { 
      noInfo: true 
     } 
    }); 
}; 

我webpack.test.js：

'use strict'; 

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    devtool: 'inline-source-map', 
    module: { 
     preLoaders: [ 
      { exclude: /node_modules/, loader: 'tslint', test: /\.ts$/ } 
     ], 
     loaders: [ 
      { loader: 'raw', test: /\.(css|html)$/ }, 
      { exclude: /node_modules/, loader: 'ts', test: /\.ts$/ }, 
      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.ts'], 
     modulesDirectories: ['node_modules'], 
     root: path.resolve('.', 'src') 
    }, 
    tslint: { 
     emitErrors: true 
    } 
}; 

Answer 1

解決。

tslint: { 
    emitErrors: true 
} 

的WebPack 2有着非常嚴格的配置：

我在webpack.test.js有這樣一個選項。現在，它看起來像這樣：

plugins: [ 
    ... 
    new LoaderOptionsPlugin({ 
     options: { 
      emitErrors: true 
     } 
    }), 
] 

此處瞭解詳情：https://github.com/gonzofish/semaphore-ng2-webpack/pull/4#issuecomment-279374763