代码之家  ›  专栏  ›  技术社区  ›  Brandon Durham

为什么Webpack认为我正在运行开发构建?

  •  0
  • Brandon Durham  · 技术社区  · 6 年前

    这是一个旧的项目,很快会得到一些更新,但在此之前,我需要使用原始的网页配置。奇怪的是,自上一次发布以来,这一点从未被触及过,但存在一个阻塞问题。

    当捆绑生产并在浏览器中运行时,我收到以下消息:

    未捕获错误:发生缩小的异常;使用未缩小的dev 完整错误消息和其他有用信息的环境 警告。

    似乎Webpack认为我是在开发模式下运行的,但使用的是缩小的React文件,因此产生了这样的消息。我跟踪了 process.env.NODE_ENV 他们都记录了 "production"

    这是捆绑文件的生成命令:

    node --max_old_space_size=3072 node_modules/.bin/webpack --verbose --colors --display-error-details --config webpack/prod.config.js
    

    和网页包配置:

    require('babel/polyfill');
    
    // Webpack config for creating the production bundle.
    const path = require('path');
    const webpack = require('webpack');
    const strip = require('strip-loader');
    
    const projectRootPath = path.resolve(__dirname, '../');
    const assetsPath = path.resolve(projectRootPath, './static/dist');
    
    const webpackPostcssTools = require('webpack-postcss-tools');
    const map = webpackPostcssTools.makeVarMap('./src/theme/index.css');
    
    // https://github.com/halt-hammerzeit/webpack-isomorphic-tools
    const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
    const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
    
    module.exports = {
        devtool: 'source-map',
        context: path.resolve(__dirname, '..'),
        entry: {
            'main': [
                './src/client.js'
            ]
        },
        output: {
            path: assetsPath,
            filename: '[name]-[chunkhash].js',
            chunkFilename: '[name]-[chunkhash].js',
            publicPath: '/dist/'
        },
        module: {
            loaders: [
                { test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
                { test: /\.json$/, loader: 'json-loader' },
                { test: /\.css$/, loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'] },
                { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
                { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
                { test: /\.svg$/, loader: 'svg-inline' },
                { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10' },
                { test: /\.modernizrrc$/, loader: 'modernizr' }
            ]
        },
        progress: true,
        resolve: {
            alias: {
                font: __dirname + '/../src/fonts',
                images: __dirname + '/../static/images',
                modernizr$: path.resolve(__dirname, '../.modernizrrc')
            },
            modulesDirectories: [
                'src',
                'node_modules'
            ],
            extensions: ['', '.json', '.js', '.jsx']
        },
        postcss: () => {
            return [
                require('autoprefixer')({
                    browsers: ['last 3 versions']
                }),
                require('precss'),
                require('postcss-custom-media')({
                    extensions: map.media
                })
            ];
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                'Scribe': 'scribe-editor'
            }),
    
            new webpack.DefinePlugin({
                __CLIENT__: true,
                __SERVER__: false,
                __DEVELOPMENT__: false,
                __DEVTOOLS__: false
            }),
    
            // ignore dev config
            new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),
    
            // set global vars
            new webpack.DefinePlugin({
                'process.env': {
                    // Useful to reduce the size of client-side libraries, e.g. react
                    NODE_ENV: JSON.stringify('production'),
                    API_HOST: JSON.stringify(process.env.API_HOST || 'api'),
                    WEB_HOST: JSON.stringify(process.env.WEB_HOST || 'https://www.website.com')
                }
            }),
    
            // optimizations
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            }),
    
            webpackIsomorphicToolsPlugin
        ]
    };
    

    我似乎找不到问题。有什么看起来可疑的东西跳出来吗?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Huy    6 年前

    因为您的代码被设置为生产,所以它正在缩小,并且您将获得该消息。

    尝试将其设置为开发(即。 NODE_ENV: JSON.stringify('development') )

    React - Minified exception occurred