Vue.js webpack配置：从*.js入口/捆绑文件名中删除哈希值

在本文中，我们将介绍如何通过配置Vue.js的webpack，从生成的JavaScript入口和捆绑文件名中移除哈希值。

什么是Webpack？

Webpack是一个现代的JavaScript应用程序打包器，它将多个模块和资源打包成一个或多个捆绑文件。通过Webpack，我们可以使用模块化的方式组织我们的应用程序，并按需加载和处理资源。

为什么要移除哈希值？

在使用Webpack打包应用程序时，每次生成的文件名都会包含一个唯一的哈希值。这个哈希值用于添加缓存无效化机制，确保当文件内容发生变化时，浏览器可以正确加载最新的文件。然而，在某些情况下，我们可能不希望文件名中包含哈希值，比如在使用某些第三方工具或服务时，需要固定的文件名。

配置Webpack

要从生成的文件名中移除哈希值，我们可以通过修改Webpack的配置文件来实现。下面是一个简单的示例：

// webpack.config.js

module.exports = {
  // 其他配置项...

  output: {
    filename: '[name].js',
  },
};

在这个示例中，我们将Webpack的输出文件名设置为[name].js。这里的[name]是一个占位符，它会被实际的文件名替换。

示例

为了更好地理解如何从文件名中移除哈希值，我们来看一个示例。假设我们的应用程序有两个入口文件entry1.js和entry2.js，并且我们不想在文件名中包含哈希值。

我们可以使用以下配置文件：

// webpack.config.js

module.exports = {
  entry: {
    entry1: './src/entry1.js',
    entry2: './src/entry2.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

在这个配置文件中，我们指定了两个入口文件entry1.js和entry2.js，以及输出文件名为[name].js。当我们运行Webpack打包时，将会生成entry1.js和entry2.js两个文件。

验证结果

接下来，我们使用上述示例配置文件进行打包，并验证输出文件的名称是否不包含哈希值。

首先，在命令行中导航到项目根目录，执行以下命令安装必要的依赖：

npm install webpack webpack-cli --save-dev

接着，在项目根目录下创建src和dist文件夹，并在src文件夹中创建entry1.js和entry2.js文件，分别输入以下内容：

// src/entry1.js

console.log('Entry 1');

// src/entry2.js

console.log('Entry 2');

接下来，创建一个index.html文件作为入口文件，将其放在项目根目录下，并添加以下内容：

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js webpack配置</title>
</head>
<body>
    <script src="dist/entry1.js"></script>
    <script src="dist/entry2.js"></script>
</body>
</html>