開発環境（Webpack）でミニ化されたjavascriptを取得

Question

私は開発環境でjavascriptを小さくしたくありません。 以下、webpackファイルとpackage.jsonの一部が添付されています。 このため、私はコードで発生したエラーを捕まえることができません。 私もエラーの下に取得してい -

1は】

  var path = require('path'); 
       var webpack = require('webpack'); 
       var HtmlWebpackPlugin = require('html-webpack-plugin'); 
       var autoprefixer = require('autoprefixer'); 
       var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
       var merge = require('webpack-merge'); 
       var CopyWebpackPlugin = require('copy-webpack-plugin'); 

       var BUILD = path.join(__dirname, 'build'); 
       var APP = path.join(__dirname, 'app'); 
       var JS = path.join(APP, 'assets', 'javascript'); 
       var env = process.env.NODE_ENV; 

       console.log('Webpack env: ' + env) 

       var sassLoaders = [ 
        'css-loader', 
        'postcss-loader', 
        'sass-loader?indentedSyntax=sass&includePaths[]=' + APP 
       ]; 

       var commonConfig = { 
        entry: [ path.join(JS, 'index.jsx') ], 
        module: { 
         loaders: [ 
          { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] }, 
          { test: /\.css/, loader: 'style-loader!css-loader?name=assets/css/[name]-[hash].[ext]' }, 
          { test: /\.png|jpg|gif$/, loader: 'file-loader?name=assets/images/[name]-[hash].[ext]' }, 
          { test: /\.xlsx$/, loader: 'file-loader?name=assets/file/[name].[ext]' }, 
          { test: /\.sass$/, loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) }, 
          { test: /\.(woff|woff2|svg|ttf|eot|ico)$/, loader: 'file-loader?name=assets/fonts/[name].[ext]' } 
         ] 
        }, 
        output: { 
         filename: 'assets/javascript/[name]-[hash].js', 
         path: BUILD, 
         publicPath: '/' 
        }, 
        externals: { 
         'jsdom': 'window', 
         'cheerio': 'window', 
         'react/lib/ExecutionEnvironment': true, 
         'react/addons': true, 
         'react/lib/ReactContext': true 
        }, 
        plugins: [ 
         new HtmlWebpackPlugin({ 
          template: 'app/index.html', 
          inject: 'body', 
          filename: 'index.html', 
          favicon: path.join(APP, 'assets', 'images', 'favicon.ico') 
         }), 
         new ExtractTextPlugin('assets/stylesheet/[name]-[hash].min.css'), 
         new CopyWebpackPlugin([ 
          { from: path.join(APP,'assets/javascript/vendor'), to: 'assets/vendor' } 
         ]), 
         new CopyWebpackPlugin([ 
          { from: path.join(APP,'assets/test'), to: 'assets/test' } 
         ]), 
         new webpack.ProvidePlugin({ 
          React: "react", 
          "_": "lodash" 
         }) 
        ], 
        postcss: [ 
         autoprefixer({ 
          browsers: ['last 2 versions'] 
         }) 
        ], 
        resolve: { 
         root: path.join(APP, 'assets'), 
         alias: { 
          config: '../../../../configs', 
          images: 'images', 
          actions: 'javascript/actions', 
          containers: 'javascript/containers', 
          components: 'javascript/components', 
          common: 'components/common', 
          constants: 'javascript/constants', 
          javascript: 'javascript', 
          layout: 'components/layout', 
          mywagers: 'pages/myWagers', 
          pages: 'components/pages', 
          home: 'pages/home', 
          utility: 'javascript/utility', 
          wagers: 'pages/wagers', 
          sheets: 'wagers/betPad/sheets' 
         }, 
         extensions: ['', '.js', '.jsx', '.sass'], 
         modulesDirectories: ['app', 'node_modules'] 
        } 
       }; 

       var devConfig = { 
        devtool: 'source-map', 
        entry: ['webpack-hot-middleware/client?reload=true'], 
        plugins: [ 
         new webpack.optimize.OccurenceOrderPlugin(), 
         new webpack.HotModuleReplacementPlugin(), 
         new webpack.NoErrorsPlugin(), 
         new webpack.DefinePlugin({ 
          'process.env': { NODE_ENV: JSON.stringify('development')} 
         }) 
        ], 
        module: { 
         postLoaders: [ 
          { 
           test: /\.js$/, 
           exclude: [/node_modules/,/vendor/], 
           loader: "jshint-loader" 
          } 
         ] 
        } 
       }; 

       var prodConfig = { 
        plugins: [ 
         new webpack.optimize.UglifyJsPlugin({ 
          compress: { 
           warnings: false 
          } 
         }), 
         new webpack.DefinePlugin({ 
          'process.env.NODE_ENV': JSON.stringify(env || 'production') 
         }) 
        ] 
       }; 

       var config; 

       switch (env) { 
        case 'development': 
         config = merge(devConfig, commonConfig); 
         break; 
        default: 
         config = merge(prodConfig, commonConfig); 
         break; 
       } 

       module.exports = config; 

2] Package.json

"scripts": { 
"clean": "rimraf build", 
"lint": "eslint app", 
"start": "set NODE_ENV=development && node server.js", 
"start:devtools": "npm run build && DEVTOOLS=true node server.js", 
"build": "rimraf build && NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors", 
"build:dev": "rimraf build && NODE_ENV=development webpack --config ./webpack.config.js --progress --profile --colors", 
"build:stage": "rimraf build && NODE_ENV=stage webpack --config ./webpack.config.js --progress --profile --colors", 
"build:production": "rimraf build && NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors", 
"test": "echo \"Error: no test specified\" && exit 1" 

}、

Answer 1

をWebpack.config.js私はあなたの問題があなたが設定しているdevconfig内にあると信じていますプロダクションビルド用のソースマップへのdevtool devtoolをevalに設定するか、開発用の別のオプションをhereに設定してみてください。例えば

var devConfig = { 
    devtool: 'eval', 
    entry: ['webpack-hot-middleware/client?reload=true'], 
    plugins: [ 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env': { NODE_ENV: JSON.stringify('development')} 
     }) 
    ],