“mode”选项未设置，webpack将使用“production”作为默认值。字段“browser”不包含有效的别名配置。

Question

项目目录结构.

以下是webpack配置文件。

webpack.config.client.js

const path = require('path');
const webpack = require('webpack');
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: 'browser',
  mode: 'development',
  // mode: 'production',
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(CURRENT_WORKING_DIR, 'client/main.js'),
  ],
  output: {
    path: path.join(CURRENT_WORKING_DIR, '/dist'),
    filename: 'bundle.js',
    publicPath: '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // To bundle image assets so that other JS code can also access
      // and load it other than the component in which it was imported into.
      {
        test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
};

module.exports = config;

webpack.config.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: 'server',
  entry: [path.join(CURRENT_WORKING_DIR, './server/server.js')],
  target: 'node',
  output: {
    path: path.join(CURRENT_WORKING_DIR, '/dist/'),
    filename: 'server.generated.js',
    publicPath: '/dist/',
    libraryTarget: 'commonjs2',
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // To bundle image assets so that other JS code can also access
      // and load it other than the component in which it was imported into.
      {
        test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
        use: 'file-loader',
      },
    ],
  },
};

module.exports = config;

webpack.client.production.js

// const path = require('path');
// const CURRENT_WORKING_DIR = process.cwd();

// const config = {
//   mode: 'production',
//   entry: [path.join(CURRENT_WORKING_DIR, 'client/main.js')],
//   output: {
//     path: path.join(CURRENT_WORKING_DIR, '/dist'),
//     filename: 'bundle.js',
//     publicPath: '/dist/',
//   },
//   module: {
//     rules: [
//       {
//         test: /\.jsx?$/,
//         exclude: /node_modules/,
//         use: ['babel-loader'],
//       },
//       // To bundle image assests so that other JS code can also access
//       // and load it other than the component in which it was imported into.
//       {
//         test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
//         use: 'file-loader',
//       },
//     ],
//   },
// };

// module.exports = config;

当我尝试运行yarn build时，出现以下错误。

 WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value.
    Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

    ERROR in main
    Module not found: Error: Can't resolve './src' in '/home/prithvi/Desktop/socialize'
    resolve './src' in '/home/prithvi/Desktop/socialize'
      using description file: /home/prithvi/Desktop/socialize/package.json (relative path: .)
        Field 'browser' doesn't contain a valid alias configuration
        using description file: /home/prithvi/Desktop/socialize/package.json (relative path: ./src)
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /home/prithvi/Desktop/socialize/src doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /home/prithvi/Desktop/socialize/src.js doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /home/prithvi/Desktop/socialize/src.json doesn't exist
          .wasm
            Field 'browser' doesn't contain a valid alias configuration
            /home/prithvi/Desktop/socialize/src.wasm doesn't exist
          as directory
            /home/prithvi/Desktop/socialize/src doesn't exist

    webpack 5.31.0 compiled with 1 error and 1 warning in 256 ms
    error Command failed with exit code 1.

以下是来自 package.json 文件的脚本配置和依赖项。

"main": "./dist/server.generated.js",
"scripts": {
    "development": "nodemon",
    "build": "webpack --config webpack.config.client.production.js && webpack --mode=production --config webpack.config.server.js",
    "start": "NODE_ENV=production node ./dist/server.generated.js"
},
"dependencies": {
    "@hot-loader/react-dom": "^17.0.1",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-jwt": "^6.0.0",
    "helmet": "^4.4.1",
    "jshint": "^2.12.0",
    "jsonwebtoken": "^8.5.1",
    "loadash": "^1.0.0",
    "mongodb": "^3.6.4",
    "mongoose": "^5.12.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hot-loader": "^4.13.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
"devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "file-loader": "^6.2.0",
    "nodemon": "^2.0.7",
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-node-externals": "^2.5.2"
}

- iCantFindaGoodUsername

---

你在 webpack.config.client.production.js 文件中有什么内容？ - Sam Chen

已经更新了。尽管webpack.client.production.js已被注释掉，因为我正在使用devBundle.js进行开发。 - iCantFindaGoodUsername

但是你的 package.json 中的 build 脚本正在使用它 "webpack --config webpack.config.client.production.js && webpack --mode=production --config webpack.config.server.js"。 - Sam Chen

但这不应该影响，因为webpack.client.production.js是空的！？ - iCantFindaGoodUsername

据我所知，这是很重要的错误。Webpack试图从“./src”读取默认条目，但该文件不存在。 - Sam Chen

明白了！ 我只需要在 package.json 中删除 production 文件并替换为 development 文件。 谢谢 @chenxsan！ - iCantFindaGoodUsername

Answer 1

const path = require('path'); // libreria
module.exports = {
entry: './js/app.js',
output: {
    path: path.resolve(__dirname, 'public/js'), 
    filename: 'bundle.js'
},
mode: 'development'}

添加mode: development命令可以解决该问题。

- Vladimir Willians

---

由于您正在使用 Stack Overflow 的英文版本，请确保所有解释性文本也用英语编写。同时，包含大量文字的图片通常最好作为实际文本呈现，以便于屏幕阅读器和搜索引擎访问。 - Jeremy Caney

Answer 2

如果您收到此警告，请解决方法如下：

webpack.config.js

 const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production', //add this line here
  });

来源：https://webpack.js.org/guides/production/#specify-the-mode

原因：我刚刚进行了一次大版本更新，得到了这个警告，幸运的是这也是你的情况。

（Note: No content was provided to be translated）

- Júlio Almeida

Answer 3

我之前也遇到了同样的问题，经过研究后，我找到了解决方案，即我们需要更新我们的 'package.json' 文件，而不需要更改您的 'webpack.config.js' 文件。

请将以下更改添加到您的 'package.json' 文件中：

"scripts": {
    "build": "webpack --config webpack.config.js"
  },

希望这对你有用。 谢谢，

- Akash Agrawal

Answer 4

您只需将“mode”选项添加到webpack配置对象即可：

const current_mode = process.env.NODE_ENV == 'production' ? 'production' : 'development';

let config = {
 devtool: 'cheap-module-source-map',
 mode: current_mode,

- aarkerio