Блог

У меня есть webpack.config ниже. Я использую плагин vue (vue-fusioncharts), который запускает javascript, который ищет «process.env.NODE_ENV! = = «производство»», и из того, что я могу сказать, поставив точку останова, объект «процесс» в этой точке равен нулю. Поэтому интересно, что я делаю не так в своем webpack.config, где объект процесса недоступен глобально, как я думал. Я устанавливаю «process.env.NODE_ENV» так, как я вижу в примерах. Это проект vue 3 с webpack, и я запускаю «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"
  }
}

 

Проблема, похоже, заключалась в пакете vue-fusioncharts, я обновился до версии 3.2.0 (совместимой с vue 3), и сообщение исчезло.

Также обратите внимание, что для webpack 4.0 вам не нужно использовать «webpack.DefinePlugin», вы просто используете свойство mode webpack (https://vuejs.org/v2/guide/deployment.html)