Webpack v3配置：如何仅为单个入口文件添加[hash]文件名？

嘿，这个场景我之前处理过，Webpack v3里完全可以给单个入口单独配置带[hash]的文件名，我给你分享两种实用的实现方式：

方法一：用output.filename的函数形式（最简洁直接） #

Webpack v3支持把output.filename设为一个函数，它会接收包含chunk信息的参数，你可以根据chunk的名称做判断，返回不同的命名规则。

直接看配置示例：

const path = require('path');

module.exports = {
  entry: {
    main: './src/main.js',
    newThing: './src/newThing.js',
    // 其他入口文件...
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: (chunkData) => {
      // 只给newThing入口添加[hash]后缀
      return chunkData.chunk.name === 'newThing' 
        ? '[name].[hash].js' 
        : '[name].js';
    }
  },
  // 其他Webpack配置（loader、插件等）...
};

这里提个小优化：如果想让hash只和当前chunk的内容绑定，避免其他文件修改影响这个入口的hash值，建议把[hash]换成[chunkhash]，这样更适合做缓存优化。

方法二：拆分配置文件（适合复杂场景） #

如果你的项目配置逻辑特别复杂，也可以把newThing入口单独拆成一个Webpack配置文件，和其他入口分开编译。不过这种方式会增加配置维护成本，只推荐在高度隔离的场景下使用：

// webpack.main.config.js（处理普通入口）
module.exports = {
  entry: { main: './src/main.js' },
  output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].js' 
  }
};

// webpack.newThing.config.js（处理带hash的入口）
module.exports = {
  entry: { newThing: './src/newThing.js' },
  output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].[hash].js' 
  }
};

然后在package.json的scripts里添加编译命令：

"scripts": {
  "build": "webpack --config webpack.main.config.js && webpack --config webpack.newThing.config.js"
}

一般来说第一种方法足够应对大多数场景，更推荐优先使用。

内容的提问来源于stack exchange，提问作者ccnokes