webpack 配置：从 *.js entry/bundle 文件名中删除散列

Question

我正在做一个 vue.js 应用程序。

构建后生成一个 js 文件 "background.2a548437.js" 而不是我想要的 "background.js"。

我正在通过 "vue.config.js" 文件进行 webpack-chain 配置。

为了诊断，我正在读取“$vue inspect”的结果，但我看不到应该调整哪个参数以从 js 文件中删除散列。

我确实看到了像 'img/[name].[hash:8].[ext]' 这样的模式，但对于 js 它是 'js/[name].js'

您有任何解决方案或线索吗？

Context/Why:

它使用 webpack "^4.0.0" 和 webpack-chain "^6.3.1" 通过 "vue.config.js".

配置

我正在做一个 chrome 插件，它有一个引用 "background.js".

的静态 manifest.json 文件

我将深入研究使 webpack 使用正确的 "background.[hash].js" 文件构建 manifest.json 文件但我认为如果我能在文件名中找到禁用散列的选项会更容易

// vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    chainWebpack: config => {
        // add your custom entry point
        config
            .entry('background')
            .add('./src/background.ts');
    },
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { from: 'manifest.json', to: 'manifest.json', flatten: true },
            ]),
        ]
    }
}

编辑： $vue 检查的结果。它太长了所以我 link 一个 pastebin https://pastebin.com/fbRzgfhY

Answer 1

在花了很长时间试图了解 webpack-chain、webpack 及其插件的工作原理之后，我在 vue 文档中找到了简单的 "filenameHashing" falg：https://cli.vuejs.org/config/#indexpath

这是我的 vue.config.js 文件内容：

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    filenameHashing: false, // <=================line that matters
    chainWebpack: config => {
        // add your custom entry point
        config
            .entry('background')
            .add('./src/background.ts');
    },
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { from: 'manifest.json', to: 'manifest.json', flatten: true },
            ]),
        ]
    }
}

webpack 配置：从 *.js entry/bundle 文件名中删除散列

webpack configuration: remove hash from *.js entry/bundle files names

google-chrome-extension

webpack

vue.js

webpack-chain