2016-11-04 11 views
2

私のreact/reduxアプリケーションのプロダクションビルドをパッケージ化するためにwebpackを取得しようとして失敗しました。ビルドは正常に終了しますが、ここで詳細を説明するようにwebpackプラグインを追加するとすぐにhttps://stackoverflow.com/a/30061249/7114096(これは縮小版のバージョンを実行しているのでreduxによって記録された警告にリンクされています)モジュールビルドに失敗しました:エラー: "base"で指定されたプラグイン0が "定義"の無効なプロパティを提供しました

webpack.config.js:

'use strict'; 

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

var BUILD_DIR = path.resolve(__dirname, 'web/bundles/frontend/build/react'); 
var APP_DIR = path.resolve(__dirname, 'web/bundles/frontend/src/react'); 

var config = { 
    entry: ['babel-polyfill', APP_DIR + '/search.js'], 
    output: { 
     path: BUILD_DIR, 
     filename: 'search.js' 
    }, 
    module : { 
     loaders : [ 
      { 
       test : /\.js?/, 
       include : APP_DIR, 
       loader : 'babel', 
       query: { 
        presets: ['react','es2015'], 
        plugins: [ 
         new webpack.DefinePlugin({ 
          'process.env': { 
           'NODE_ENV': JSON.stringify('development') 
          } 
         }), 
         "transform-object-rest-spread" 
        ] 
       } 
      } 
     ] 
    } 
}; 

module.exports = config; 

package.json:

"babel-cli": "^6.16.0", 
"babel-core": "^6.18.2", 
"babel-loader": "^6.2.5", 
"babel-plugin-transform-object-rest-spread": "^6.16.0", 
"babel-polyfill": "^6.16.0", 
"babel-preset-es2015": "^6.16.0", 
"babel-preset-node5": "^11.1.0", 
"babel-preset-react": "^6.16.0", 
"bower": "^1.7.9", 
"bower-update-all": "^0.1.2", 
"csswring": "^5.1.0", 
"gulp": "^3.9.1", 
"gulp-autoprefixer": "^3.1.0", 
"gulp-babel": "^6.1.2", 
"gulp-browserify": "^0.5.1", 
"gulp-clean-css": "^2.0.11", 
"gulp-compass": "^2.1.0", 
"gulp-concat": "^2.6.0", 
"gulp-imagemin": "^3.0.2", 
"gulp-minify": "0.0.12", 
"gulp-plumber": "^1.1.0", 
"gulp-postcss": "^6.1.1", 
"gulp-rename": "^1.2.2", 
"gulp-sourcemaps": "^1.6.0", 
"gulp-util": "^3.0.7", 
"gulp-webpack": "^1.5.0", 
"merge-stream": "^1.0.0", 
"path": "^0.12.7", 
"postcss-cssnext": "^2.7.0", 
"react": "^15.3.2", 
"react-bootstrap": "^0.30.5", 
"react-dom": "^15.3.2", 
"react-redux": "^4.4.5", 
"redux": "^3.6.0", 
"redux-saga": "^0.12.0", 
"require-dir": "^0.3.0", 
"webpack": "^1.13.3" 

そして最後のエラー:

ERROR in ./web/bundles/frontend/src/react/search.js 
Module build failed: Error: Plugin 0 specified in "base" provided an invalid property of "definitions" 
    at Plugin.init (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\plugin.js:131:13) 
    at Function.normalisePlugin (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:12) 
    at C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:30 
    at Array.map (native) 
    at Function.normalisePlugins (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:154:20) 
    at OptionManager.mergeOptions (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:36) 
    at OptionManager.init (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12) 
    at File.initOptions (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\index.js:216:65) 
    at new File (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\index.js:139:24) 
    at Pipeline.transform (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\pipeline.js:46:16) 
    at transpile (C:\xampp\htdocs\test\node_modules\babel-loader\index.js:38:20) 
    at Object.module.exports (C:\xampp\htdocs\test\node_modules\babel-loader\index.js:131:12) 
@ multi main 

任意の考え?

答えて

2

あなたのプラグインが間違った場所に定義されていると思います。 Webpackプラグインをローダー内で定義しないでください。

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

var BUILD_DIR = path.resolve(__dirname, 'web/bundles/frontend/build/react'); 
var APP_DIR = path.resolve(__dirname, 'web/bundles/frontend/src/react'); 

var config = { 
    entry: ['babel-polyfill', APP_DIR + '/search.js'], 
    output: { 
     path: BUILD_DIR, 
     filename: 'search.js' 
    }, 
    module : { 
     loaders : [ 
      { 
       test : /\.js?/, 
       include : APP_DIR, 
       loader : 'babel', 
       query: { 
        presets: ['react','es2015'], 
        plugins: ["transform-object-rest-spread"] 
       } 
      } 
     ] 
    }, 
    plugins: [ 
         new webpack.DefinePlugin({ 
          'process.env': { 
           'NODE_ENV': JSON.stringify('development') 
          } 
         }) 

        ] 
}; 

module.exports = config; 
+0

ありがとう!あなたの解決策は別のエラーを引き起こしましたが、私は正しい軌道に乗りました。 "transform-object-rest-spread"は元の位置にとどまるべきですが、DefinePluginを他のプラグイン配列に移動することについては正しいです。あなたの答えを変えて、私はそれを解決策として受け入れるでしょう:) –

+0

私の間違い、私はそれを見ていませんでした。 :)ソリューションを編集:) –

関連する問題