在开发环境中获得minifyed javascript(Webpack)

时间:2017-02-07 07:07:31

标签: webpack webpack-dev-server

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

enter image description here

1] Webpack.config.js

let task = manager.get((url?.absoluteString)!, parameters: nil, progress: nil, success: {
        (dataTask, responseObj) in

        if let dict : NSDictionary = responseObj as? NSDictionary {

            //print("Response: \(dict)")
            AuditListParser().parseAudit(jsonData: dict)
        }
    }, failure: {
        (dataTask, error) in
        print(error.localizedDescription)
    })
task.resume()

2] Package.json

         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;

},

1 个答案:

答案 0 :(得分:0)

我相信您的问题在您的devconfig中,您正在将devtool设置为source-map,这适用于生产版本。您应该尝试将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')}
        })
     ],