webpack打包时如何修改文件名的实现示例

修改webpack打包后的文件名是一个比较常见的需求，这里提供一种通用的实现方式。具体实现步骤如下：

1. 配置output的filename

在webpack.config.js文件中，找到output配置项，将filename选项配置为一个函数，例如：

const path = require('path');

module.exports = {
  output: {
    filename: (chunkData) => {
      return chunkData.chunk.name === 'main' ? 'js/[name].[chunkhash].js' : 'js/[name].[contenthash].js';
    },
    path: path.resolve(__dirname, 'dist')
  }
}

上述代码中，我们将output的filename选项配置为一个函数，该函数接收一个chunkData参数，其中包括chunkData.chunk.name、chunkData.contentHash、chunkData.chunk.contentHash等信息。这里我们根据chunkData.chunk.name值的不同，使用不同的文件名模板。

如果chunkData.chunk.name等于'main'，我们使用js/[name].[chunkhash].js作为文件名，其中[name]表示入口文件名，[chunkhash]表示chunk内容的hash值（这里使用chunkhash是因为我们将JS文件分离为单独的文件，需要保证文件内容的变化才能正确更新文件）。如果chunkData.chunk.name不等于'main'，则使用js/[name].[contenthash].js作为文件名，其中[name]仍然表示入口文件名，[contenthash]表示chunk内容的hash值。

这样配置后，在打包后的dist目录下可以看到生成的JS文件名符合我们设定的规范。

1. 配置html-webpack-plugin插件的filename

在使用webpack打包时，我们经常使用html-webpack-plugin插件将打包后生成的JS文件自动引入到HTML文件中，而且HTML文件自身的名称也希望能够得到修改。与此同时，我们还需要将生成的HTML文件保存到合适的文件夹下。

修改html-webpack-plugin插件的filename和path非常简单，只需要在webpack的配置文件中进行如下设置即可：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  output: {
    filename: (chunkData) => {
      return chunkData.chunk.name === 'main' ? 'js/[name].[chunkhash].js' : 'js/[name].[contenthash].js';
    },
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      path: path.resolve(__dirname, 'dist/custom-folder'),
    })
  ]
}

上述代码中，我们针对html-webpack-plugin插件进行了如下配置：

• template选项：指定HTML文件的模板文件路径；
• filename选项：指定生成的HTML文件名；
• path选项：指定生成的HTML文件存放在哪个路径下。

我们可以根据需要，将生成的HTML文件存放到任意文件夹下，这里将HTML文件存放在了dist/custom-folder文件夹下。

如果有多个HTML文件需要生成，我们可以通过多次new HtmlWebpackPlugin调用，配置不同的filename和template选项，从而生成多个不同的HTML文件。