2017-11-09 10 views
-2

ReferenceError:pluginsが定義されていません。コマンドnpmを実行するとビルドが実行されます。問題がどこにありますか?** webpackの設定方法を教えてください。"プラグインが定義されていません"

// WebPACKのconfig.jsの

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

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 
const OptimizeJsPlugin = require("optimize-js-plugin"); 

module.exports = { 
     entry: (env !== 'production' ? [ 
      'react-hot-loader/patch', 
      'webpack-dev-server/client?http://localhost:8080', 
      'webpack/hot/only-dev-server', 
     ] : []).concat(['./client/index.js']), 
    output: { 
     filename: './bundle.js', 
     path: path.resolve(__dirname, 'public'), 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       loader: "babel-loader" 
      }, 
      { 
       test: /\.css$/, 
       use: [ 
        { loader: 'style-loader'}, 
        { 
         loader: 'css-loader', 
         options: { 
          modules: true 
         } 
        } 
       ] 
      } 
     ] 
    }, 
    plugins: [new HtmlWebpackPlugin({ 
     template: 'public/index.html', 
     filename: 'index.html', 
     inject: 'body' 
    }), 
    new webpack.optimize.UglifyJsPlugin(), 
     new OptimizeJsPlugin({ 
     sourceMap: false})] 
}; 


var env = process.env.NODE_ENV || 'development'; 

console.log('NODE_ENV:', env); 

if (env === 'production') { 
plugins.push(
    new webpack.optimize.UglifyJsPlugin(), 
    new OptimizeJsPlugin({ 
     sourceMap: false 
    }) 
); 
} 

平均process.env.NODE_ENV何ですか?どこで私は間違いをしましたか?

+1

'plugins'は' module.exports'のプロパティです。変数ではありません。 –

+0

'process.env.NODE_ENV'は現在のNode環境です。通常は、動作中かどうかに基づいて動作やプログラムを変更するために端末引数として渡されます。 – Li357

+0

どうすればいいですか?あなたは何か考えていますか? – Mario

答えて

0

私は、プロダクションビルド中に醜悪化して最適化したいと仮定しています。コメントに記載されているように、NODE_ENVはあなたがどのような環境にいるかを伝えます(開発/生産)。

次のファイルをファイルの先頭に移動します。 module.exportsステートメントの前。

var env = process.env.NODE_ENV || 'development'; 

そして、次のコードを使用して、プラグインのオプションを置き換えます。

plugins: [ 
    // Plugins that apply to both development and production builds 
    new HtmlWebpackPlugin({ 
     template: 'public/index.html', 
     filename: 'index.html', 
     inject: 'body' 
    })] 
    .concat((env !== 'production') ? [ 
     // Plugins that apply to development builds only 

    ] : [ 
     // Plugins that apply to production builds only 
     new webpack.optimize.UglifyJsPlugin(), 
     new OptimizeJsPlugin({ 
      sourceMap: false 
     }) 
    ]) 

concat関数を使用して、プラグインの配列に多くのプラグインを追加することができます。 concat関数を条件(env!== 'production')と組み合わせると、開発ビルドまたはプロダクションビルドのいずれか、あるいはその両方に使用されるプラグインを定義できるソリューションが得られます。

また、モジュールエクスポートの下で試したプラグインビットを削除してください。範囲外の配列にプッシュすることはできません。

関連する問題