时间戳

首页 > 解决方案 > 我最近从 webpack-4 升级到了 webpack-5。我无法正确获取捆绑包的名称

javascript - 我最近从 webpack-4 升级到了 webpack-5。我无法正确获取捆绑包的名称

问题描述

我最近升级到 webpack@5.44，之后我的 dev 构建给出了正确的包名称，但是当我在生产模式下运行构建时，它给出了数字包名称。并且一些捆绑包在生产构建中丢失了。

webpack.dev.config.js（用于开发构建）

const webpack = require('webpack')
const path = require('path')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BrotliPlugin = require('brotli-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')

const ACCEPTABLE_GOV_CLOUD_STRINGS = ['gov', 'govcloud']

module.exports = function(env = {}, argv) {
  const mode = argv.mode
  const cloudMode = argv.cloudmode || ''
  require('dotenv').config({path: `./.env.${mode}`})
  const envVariables = process.env
  const {
    APOLLO_URL,
    APOLLO_VERSION,
    WEBSOCKET_URL,
    SETTINGS_URL,
    PREPROD_SETTINGS_URL,
    AUTH_URL,
    PREPROD_AUTH_URL,
    EDR_URL,
    MFS_MEDIATOR,
    CSA_DASHBOARD_URL,
    PREPROD_CSA_DASHBOARD_URL,
  } = envVariables
  const basePath = argv['ui-version'] ? `/ui-${argv['ui-version']}/` : '/ui-v5/'
  // eslint-disable-next-line no-console
  console.log('Building for ' + mode + '...', argv.iam)
  const config = {
    entry: path.resolve(__dirname, 'src/index.tsx'),
output: {
  publicPath: basePath,
  filename: '[name].[fullhash].js',
  chunkFilename: '[name].[fullhash].js',
  path: path.join(__dirname, './build'),
},

mode: mode,
devtool: 'eval-source-map',
resolve: {
  extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
  fallback: {
    fs: false,
    tls: false,
    net: false,
    path: false,
    zlib: false,
    http: false,
    https: false,
    stream: false,
    crypto: require.resolve('crypto-browserify'),
  },
},

module: {
  rules: [
    {
      test: /\.tsx?$/,
      exclude: [/node_modules/],
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
    },
    {
      test: /\.m?js/,
      resolve: {
        fullySpecified: false,
      },
    },
    {
      test: /\.js?$/,
      exclude: [/node_modules/],
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
    },
    {
      test: /\.(svg|png|jpg|woff|woff2|eot|ttf|otf)$/,
      use: 'file-loader',
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},
plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, 'index.html'),
    SETTINGS_URL:
      argv.iam === 'preprod' ? PREPROD_SETTINGS_URL : SETTINGS_URL,
    AUTH_URL: argv.iam === 'preprod' ? PREPROD_AUTH_URL : AUTH_URL,
    MFS_MEDIATOR: `${basePath}${MFS_MEDIATOR}`,
  }),
  new ForkTsCheckerWebpackPlugin({memoryLimit: 5000}),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.EnvironmentPlugin({
    NODE_ENV: mode, // default value matches mode
    APOLLO_ACCESS_TOKEN: null, // default value of null => unset
    APOLLO_ACCESS_TOKEN_EXPIRES: null, // default value of null => unset
    APOLLO_URL: APOLLO_URL, //envConfig[envMode].APOLLO_URL,
    APOLLO_VERSION: APOLLO_VERSION,
    WEBSOCKET_URL: WEBSOCKET_URL,
    EDR_URL: EDR_URL,
    IS_GOV_CLOUD: ACCEPTABLE_GOV_CLOUD_STRINGS.includes(
      cloudMode.toLowerCase(),
    ),
    CSA_DASHBOARD:
      argv.iam === 'preprod'
        ? PREPROD_CSA_DASHBOARD_URL
        : CSA_DASHBOARD_URL,
    basePath: basePath,
  }),
  new CompressionPlugin(),
  new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg|woff|woff2)$/,
  }),
],
devServer: {
  host: '0.0.0.0',
  port: 7676,
  historyApiFallback: {
    index: basePath,
  },
  https: true,
},
optimization: {
  splitChunks: {
    chunks: 'all',
  },
  moduleIds: 'named',
},
}


return config
}

webpack.config.js（用于生产构建）

const webpack = require('webpack')
const path = require('path')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BrotliPlugin = require('brotli-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')

const ACCEPTABLE_GOV_CLOUD_STRINGS = ['gov', 'govcloud']

module.exports = function(env = {}, argv) {


const mode = argv.mode === 'none' ? 'staging' : argv.mode
  const cloudMode = argv.cloudmode || ''
  require('dotenv').config({path: `./.env.${mode}`})
  const envVariables = process.env
  const {
    APOLLO_URL,
    APOLLO_VERSION,
    WEBSOCKET_URL,
    SETTINGS_URL,
    PREPROD_SETTINGS_URL,
    AUTH_URL,
    PREPROD_AUTH_URL,
    EDR_URL,
    MFS_MEDIATOR,
    CSA_DASHBOARD_URL,
    PREPROD_CSA_DASHBOARD_URL,
  } = envVariables
  const basePath = argv['ui-version'] ? `/ui-${argv['ui-version']}/` : '/ui-v5/'
  // eslint-disable-next-line no-console
  console.log(`Building for ${mode} ...`)

  const config = {
entry: path.resolve(__dirname, 'src/index.tsx'),

output: {
  publicPath: basePath,
  filename: '[name].[fullhash].js',
  chunkFilename: '[name].[fullhash].js',
  path: path.join(__dirname, './build'),
},

mode: 'production',
// NOTE:
// For production builds devtool should either be not present or 'source-map'.
// Please do not set any other value that will bundle the sourcemap into the prod bundle.js
devtool: mode === 'production' ? false : 'eval-source-map',

resolve: {
  extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
  fallback: {
      "fs": false,
    "tls": false,
    "net": false,
    "path": false,
    "zlib": false,
    "http": false,
    "https": false,
    "stream": false,
    "crypto": require.resolve('crypto-browserify'),
  }
},

module: {
  rules: [
    {
      test: /\.tsx?$/,
      exclude: [/node_modules/],
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
    },
    {
      test: /\.js?$/,
      exclude: [/node_modules/],
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
    },
    {
      test: /\.m?js/,
      resolve: {
         fullySpecified: false
      }
    },
    {
      test: /\.(svg|png|jpg|woff|woff2|eot|ttf|otf)$/,
      use: 'file-loader',
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, 'index.html'),
    SETTINGS_URL:
      argv.iam === 'preprod' ? PREPROD_SETTINGS_URL : SETTINGS_URL,
    AUTH_URL: argv.iam === 'preprod' ? PREPROD_AUTH_URL : AUTH_URL,
    MFS_MEDIATOR: `${basePath}${MFS_MEDIATOR}`,
  }),
  new ForkTsCheckerWebpackPlugin({ memoryLimit: 5000 }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.EnvironmentPlugin({
    NODE_ENV: 'production', // default value matches mode
    APOLLO_ACCESS_TOKEN: null, // default value of null => unset
    APOLLO_ACCESS_TOKEN_EXPIRES: null, // default value of null => unset
    APOLLO_URL: APOLLO_URL,
    APOLLO_VERSION: APOLLO_VERSION,
    WEBSOCKET_URL: WEBSOCKET_URL,
    EDR_URL: EDR_URL,
    IS_GOV_CLOUD: ACCEPTABLE_GOV_CLOUD_STRINGS.includes(
      cloudMode.toLowerCase(),
    ),
    CSA_DASHBOARD:
      argv.iam === 'preprod'
        ? PREPROD_CSA_DASHBOARD_URL
        : CSA_DASHBOARD_URL,
    basePath: basePath,
  }),
  new CompressionPlugin(),
  new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg|woff|woff2)$/,
  }),
],

devServer: {
  host: '0.0.0.0',
  port: 7676,
  historyApiFallback: {
    index: basePath,
  },
  https: true,
},

optimization: {
  splitChunks: {
    chunks: 'all',
  },
  moduleIds: 'named',
},
}


return config
}

我能做些什么来解决这个问题？

标签： javascriptwebpackwebpack-4webpack-5

解决方案

根据文档，它看起来像是将模式设置为生产“ Enables deterministic mangled names for modules and chunks”。您还optimization.moduleIds设置为“命名”。根据优化文档，该值会为调试创建可读的 id。

我的猜测是这两个设置是冲突的。您可能希望您的生产配置对您的optimization.moduleIds设置具有“确定性”。

推荐阅读