webpack.DefinePluginが認識されず、devtool： 'cheap-module-source-mapが機能しません。

Question

この記事の後には、http://moduscreate.com/optimizing-react-es6-webpack-production-build/のようにプロダクションのための反応プロジェクトのサイズを縮小しようとしています。残念ながら、いくつかの手順は機能しません。それらのうちの1つはwebpack.DefinePluginで、webpackにはwebpack.DefinePluginを定義できないというエラーが出力されます。たぶん、それは私が開発したプロジェクトをビルドして、今はそれをプロダクションに移したいからです。たぶん、私は最初にプロダクションでプロジェクトを作成しなければなりませんでしたか？それとも、誰もプロジェクトの規模を縮小するより良い方法を知っていますか？

webpack.config.js

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

var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
    devtool: 'cheap-module-source-map', 
    entry: SRC_DIR + "/app/index.js", 
    output: { 
     path: DIST_DIR + "/app", 
     filename: "bundle.js", 
     publicPath: "/app/" 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js?/, 
       include: SRC_DIR, 
       loader: "babel-loader", 

       query: { 
        presets: ["react", "es2015", "stage-2"] 
       } 
      } 
     ] 
    } 


}; 

module.exports = config; 

も、devtool：「安い・モジュール・ソース・マップ」は機能していない、それは、すべてのプロジェクトのサイズを減少させませんでした。

Answer 1

ではなく

... 

plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }) 

... 

を試してみてください。

また、devtool: 'cheap-module-source-map'は、バンドルのサイズを縮小するためではなく、source mapsを生成します。