webpack - Ionic 2 更改 main.js 的名称( webpack.js output.filename 设置)

Question

我们有一个本地部署的 Ionic 2 应用程序，也部署到网络上。构建时我使用 npm run build --prod --release .这只是包装 ionic build.
我正在尝试更新我们的构建过程，以便能够换出默认的 main.js.那是在 index.html

所以我希望能够从以下位置更改此文件:

<script src="build/main.js"></script>

with(自动生成的哈希)

<script src="build/main.7b297e8f7d1c2760a1bc.js"></script>

第一步是生成文件。通过使用 webpack output.filename 设置，我能够在每次构建时成功生成正确的文件。

module.exports = {
   entry: [process.env.IONIC_APP_ENTRY_POINT, './web.config', './src/ai.min.js'],
   output: {
    path: '{{BUILD}}',
    filename: '[name].[chunkhash].js',

当我构建时，我可以看到它正确地生成了源文件，但在完成 ionic build 后不久。失败并显示一条消息说找不到 build/main.js.那是原始文件名，所以我想我需要以某种方式让 ionic 知道我正在更改 main.js 文件的名称。

错误:

[11:00:32] build prod failed: ENOENT: no such file or directory, open
'/Users/work/client/www/build/main.js'
[11:00:32] ionic-app-script task: "build"
[11:00:32] Error: ENOENT: no such file or directory, open '/Users/work/client/www/build/main.js'
我不知道如何更新 ionic build以便它知道查找动态生成的 main.js 文件名。

Answer 1

我从一个 ionic 论坛线程( https://forum.ionicframework.com/t/file-revisions/75028/2 ，由 aszmyd 提供)找到了一个更好的解决方案，它也解决了散列 main.css 文件名的问题。我对脚本做了一些小调整，因为我没有 oauth.html 或 kajam.js。

此解决方案的优点是它不会尝试拦截 ionic 构建，而只是对结果起作用。

(毫无疑问，有人会发现我发布这篇文章的方式有问题，但它对我非常有用，我希望对其他人有用。我无法想象有一个 Web 应用程序没有对所有 css 和 js 文件进行完整的缓存破坏。 )

要运行它，只需添加:

node <the-file-name.js>

在您的构建中， ionic 脚本构建完成后。

#!/usr/bin/env node
'use strict';

var md5File = require('md5-file'),
    fs = require('fs');

/**
 * This script renames files inside platforms/browser/www/ folder and updates their references in html files like index.html
 * The mechanism is for improve caching. So file like `main.js` will be renamed to `main.[FILE-MD5-HASH].js` and its references
 * in html files will be updated.
 */
var buildFolder = 'www/';
var assetsFolder = buildFolder + 'build/';

var jsFiles = [
    'main'
];
var cssFiles = [
    'main'
];
var htmlFilesToUpdate = [
    'index.html'
];
var replacements = [];

jsFiles.forEach(function (file) {
    var hash = md5File.sync(assetsFolder + file + '.js');
    renameFile(file + '.js', file + '.' + hash + '.js');
});

cssFiles.forEach(function (file) {
    var hash = md5File.sync(assetsFolder + file + '.css');
    renameFile(file + '.css', file + '.' + hash + '.css');
});
htmlFilesToUpdate.forEach(function (htmlFile) {
    console.log('Update "' + htmlFile + '" with new file revisions.');
    console.log('Replacements: ' + JSON.stringify(replacements));
    replacements.forEach(function (replacementObject) {
        replaceInFile(buildFolder + htmlFile, replacementObject.from, replacementObject.to);
    });
});

function renameFile(input, output) {
    console.log('Rename "' + input + '" to "' + output + '"');
    fs.rename(assetsFolder + input, assetsFolder + output);
    if (fs.existsSync(assetsFolder + input + '.map')) {
        console.log('Rename "' + input + '.map" to "' + output + '.map"');
        fs.rename(assetsFolder + input + '.map', assetsFolder + output + '.map');
    }
    replacements.push({from: input, to: output});
}

function replaceInFile(file, regex, replacement) {
    var fileContents = fs.readFileSync(file, 'utf-8');
    fs.writeFileSync(file, fileContents.replace(regex, replacement), 'utf8');
}