webpack process.env.NODE_ENV 未定义

Posted 2023-02-15

【中文标题】webpack process.env.NODE_ENV 未定义

【英文标题】：webpack process.env.NODE_ENV undefined

【发布时间】：2021-11-04 15:34:24

【问题描述】：

我有下面的 webpack.config。我正在使用一个运行 javascript 的 vue 插件（vue-fusioncharts），它寻找“process.env.NODE_ENV！== 'production'”，据我所知，在那里放置一个断点，“process”对象是那时为空。所以想知道我在 webpack.config 中做错了什么，其中进程对象在全局范围内不可用，就像我想象的那样。我正在按照我在示例中看到的方式设置“process.env.NODE_ENV”。这是带有 webpack 的 vue 3 项目，我正在运行“npm run watch”，然后在本地调试，试图摆脱这个警告..

警告信息（我正在尝试解决的问题）：

进程为空的违规代码：

webpack.config：

const path = require('path');
const webpack = require('webpack');

const  CleanWebpackPlugin  = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const  VueLoaderPlugin  = require("vue-loader");

const srcPath = path.resolve(__dirname, './src');
const stylePath = path.resolve(srcPath, './styles');
const bldPath = path.resolve('../BlahApp/wwwroot/dist');

module.exports = 
    //devtool: 'source-map',
    entry: 
        master: path.resolve(srcPath, 'index.js'),
        style: `$stylePath/style.css`
    ,
    resolve: 
        alias: 
            'vue': 'vue/dist/vue.esm-bundler.js'
        
    ,
    mode: 'production',
    watch: true,
    module: 
        rules: [
            
                test: /\.scss$/,
                use: [ loader: 'style-loader' ,
                       loader: 'css-loader' ,
                        
                            loader: 'postcss-loader',
                            options: 
                                postcssOptions: 
                                    plugins: [ require('autoprefixer') ]
                                    
                                                       
                        ,
                     loader: 'sass-loader' ]
            ,
            
                exclude: /(node_modules|bower_components)/,
                include: srcPath,
                test: /\.js$/,
                use: [ loader: 'babel-loader' ]
            ,
            
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name].[ext]',
                            publicPath: './fonts/',
                            outputPath: './fonts/',
                            esModule: false
                        
                    
                ]
            ,
            
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            ,
            
                test: /\.vue$/,
                loader: 'vue-loader'
            ,
            
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name].[ext]',
                            outputPath: './images/',
                            publicPath: './images/',
                            esModule: false
                        
                    
                ]
            
        ]
    ,
    optimization: 
        splitChunks: 
            cacheGroups: 
                vendors: 
                    chunks: 'all',
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/
                
            
        ,
    ,
    output: 
        filename: '[name].min.js',
        chunkFilename: '[name].min.js',
        globalObject: 'this',
        path: `$bldPath`,
        publicPath: '/dist/'
    ,
    plugins: [
        new CleanWebpackPlugin(
            cleanOnceBeforeBuildPatterns: [`$bldPath/**`],
            dry: false,
            verbose: true,
            dangerouslyAllowCleanPatternsOutsideProject: true
        ),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin(
            filename: '[name].min.css'
        ),
        new webpack.DefinePlugin(
            'process.env' : 
                'NODE_ENV' : '"production"'
            
        )      
    ]
;

包.json：

  "name": "blah-app.ui",
  "version": "0.0.0",
  "description": "BlahApp.UI",
  "author": 
    "name": ""
  ,
  "scripts": 
    "build": "webpack --color --progress",
    "watch": "webpack --color --progress --watch"
  ,
  "devDependencies": 
    "@babel/core": "^7.14.8",
    "@vue/compiler-sfc": "^3.1.5",
    "autoprefixer": "^10.3.1",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^6.2.0",
    "expose-loader": "^3.0.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.1.0",
    "node-sass": "^6.0.1",
    "postcss": "^8.3.6",
    "postcss-loader": "^6.1.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^16.4.1",
    "webpack": "^5.48.0",
    "webpack-cli": "^4.7.2"
  ,
  "dependencies": 
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@vuelidate/core": "^2.0.0-alpha.22",
    "@vuelidate/validators": "^2.0.0-alpha.19",
    "axios": "^0.21.1",
    "bootstrap": "^4.5.2",
    "core-js": "^3.16.0",
    "fusioncharts": "^3.17.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "popper.js": "^1.16.1",
    "source-map-loader": "^3.0.0",
    "tabulator-tables": "^4.9.3",
    "tippy.js": "^6.3.1",
    "vue": "^3.1.5",
    "vue-final-modal": "^3.4.0",
    "vue-fusioncharts": "^3.1.0",
    "vue-next-select": "^2.8.0"
  

【参考方案1】：

问题似乎是vue-fusioncharts包，我升级到3.2.0（vue 3兼容），消息消失了。

另外注意，对于 webpack 4.0+，你不需要使用“webpack.DefinePlugin”，你只需使用 webpack 的 mode 属性（https://vuejs.org/v2/guide/deployment.html）