webpack - 开发中的 Webpack 长块名

Question

当我在development. 例如，我创建了一个包含 react 和 react-dom 模块的块：

cacheGroups: {
  react: {
    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
    name: 'vendors~A',
    enforce: true,
    chunks: 'all',
    reuseExistingChunk: true,
    priority: 10
  },
  ...
}

在开发中，生成的块的名称变为：vendors~A~._node_modules_react-.eb31e3d6ed9d854e0daa.js

我想删除_node_modules_react-部分。我怎样才能做到这一点？我以为[name]给出了文件名？https://webpack.js.org/configuration/output

我的 webpack 配置如下：

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname + '../build')
  },
  devServer: {
    contentBase: path.join(__dirname, '../build'),
    port: 3030,
    historyApiFallback: true,
    inline: false,
    hot: false
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  optimization: {    
    runtimeChunk: 'single',
    splitChunks: {
      maxSize: 500000,
      minSize: 0,
      chunks: 'all',
      automaticNameDelimiter: '~',
      cacheGroups: {
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'vendors~A',
          enforce: true,
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 10
        },
        common: {
          test: /[\\/]node_modules[\\/](.*i18next.*|.*redux|react-router.*|@emotion.*|.*redux)[\\/]/,
          name: 'vendors~B',
          enforce: true,
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 9
        },
        main: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendors~main',
          reuseExistingChunk: true,
          enforce: true,
          priority: 1
        },
        default: {
          minChunks: 2,
          priority: 0,
          reuseExistingChunk: true
        }
      }
    },
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ]
  },
  resolve: {
    alias: {
      _components: path.resolve(__dirname, '../src/components/'),
      _hooks: path.resolve(__dirname, '../src/hooks/'),
      _reducers: path.resolve(__dirname, '../src/reducers/'),
      _src: path.resolve(__dirname, '../src/'),
      _views: path.resolve(__dirname, '../src/views/')
    },
    extensions: [".tsx", ".js", ".css", ".scss"]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HashedModuleIdsPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[name].[contenthash].css'
    }),
    new CopyWebpackPlugin([
      {from: 'assets/*.svg', to: 'assets', flatten: true},
      {from: 'assets/*.woff', to: 'fonts', flatten: true},
      {from: 'locales/**/*.json', to: ''},
      {from: 'src/*.html', to: '', flatten: true},
    ]),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.html'),
      filename: 'index.html',
      favicon: path.resolve(__dirname, '../assets/favicon.ico'),
      inject: true
    })
  ]
};

PS：在production我得到vendors~A~f734b0c6.c8768b8083857ef954bf.js，不知道为什么有两个哈希，但这个名字更可取......

标签： webpack

Answer 1

您可以使用output.chunkFilename。

这是我一直用于我的用例的一个小片段：

output: {
        ...common.output,
        path: resolve(__dirname, '../lib/'),
        filename: chunkData => chunkData.chunk.name === 'core' ? 'core.min.js' : '[name].min.js',
        library: '[name]',
        libraryTarget: 'umd',
        chunkFilename: '[name].min.js'
    },