Webpack 在开发环境(网页包)上获取精简的javascript

Webpack 在开发环境(网页包)上获取精简的javascript,webpack,webpack-dev-server,Webpack,Webpack Dev Server,我不想在开发环境中使用精简的javascript。 下面我附上了我的网页文件和package.json的一部分。 因此,我无法捕获代码中发生的错误。 我也得到以下错误- 1]Webpack.config.js var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-web

我不想在开发环境中使用精简的javascript。 下面我附上了我的网页文件和package.json的一部分。 因此,我无法捕获代码中发生的错误。 我也得到以下错误-

1]Webpack.config.js

         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"

},

我相信您的问题在您的devconfig中,您正在将devtool设置为用于生产构建的源映射。您应该尝试将devtool设置为eval或其他用于开发的选项,请参阅

比如说

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')}
        })
     ],