Webpack 如何配置打包后的文件名

对于前端开发来说，打包是必备的一项技能。Webpack 是目前最为流行的打包工具之一，它可以将多个模块打包成一个或多个静态资源文件。但是，Webpack 在打包之后会生成一些默认的文件名，这些文件名并不总是符合我们的需求，因此需要配置打包后的文件名。

如何配置

在 Webpack 配置文件中，可以通过 output 配置项来定义打包后文件的名称和路径，具体如下：

module.exports = {
  output: {
    filename: 'bundle.js',        // 打包后生成的文件名
    path: path.resolve(__dirname, 'dist'),  // 打包后生成的文件路径
    publicPath: '/'
  },
  // rest of the configuration
};

上述代码中的 output 配置项包含以下参数：

• filename 表示打包后输出的文件名，默认为 main.js。
• path 表示打包后输出文件的路径，默认为 dist 目录。
• publicPath 表示 Webpack 打包输出文件的 URL 路径，一般是用来设置静态资源的根路径。

文件名的配置规则

Webpack 支持多种文件名的配置方式，下面来介绍一些常见的文件名配置规则：

[name]

[name] 表示模块的名称，在使用 CommonJS 或 ES6 模块时，模块的名称就是文件名。用于将模块打包成多个文件时常常使用。

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
  },
  output: {
    filename: '[name].js',        // 打包后生成的文件名为 page1.js 和 page2.js
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  // other configuration
};

[hash]

[hash] 表示本次打包的 hash 值，每次打包时如果文件内容发生变化，这个值也会随之改变，用于保证文件的唯一性。用于解决缓存问题时经常使用。

// javascriptcn.com 代码示例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[hash].js',   // 打包后生成的文件名：main.<hash>.js
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  // other configuration
};

[chunkhash]

[chunkhash] 表示每个打包生成的文件的唯一 hash 值，与 [hash] 相比，它只针对于每个 chunk 进行了 hash 计算，因此可以避免无关代码对缓存的影响。用于生产环境时常常使用。

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['react', 'react-dom'],
  },
  output: {
    filename: '[name].[chunkhash].js',   // 打包后生成的文件名：main.<chunkhash>.js
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  // other configuration
};

示例代码

下面给出一个完整的 Webpack 配置文件示例，展示了如何使用以上文件名配置规则：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['react', 'react-dom', 'react-router-dom'],
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-transform-runtime'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },

  plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html',
  })],

  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendor',   // split 'react', 'react-dom', 'react-router-dom' to a separate chunk
    },
  }
};

总结

通过上述介绍，我们可以清晰地了解到如何配置 Webpack 打包后的文件名，并学习了常用的文件名配置规则。合理地配置文件名可以提高网页的性能和可维护性，为今后的 Webpack 打包工作带来很大的便利。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f6d1d7d4982a6eb08dae4