尚未设置“mode”选项，webpack 将回退到该值的“生产”。“浏览器”字段不包含有效的别名配置

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.生产.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"
}

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命令即可解决问题。

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/product/#specify-the-mode

原因：我刚刚做了一个巨大的版本更新并收到了这个警告，幸运的是这也是你的情况