Question

我们有一个Ionic 2应用程序，可以本地部署，也可以部署到Web上。构建时我使用npm run build --prod --release。这只是包裹ionic build.

我正在尝试更新我们的构建过程，以便能够换出index.html中的默认main.js.

所以我希望能够从：

更改此文件

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

with（autogenerated hash）

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

第1步是生成文件。通过使用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.那是原始文件名所以我想我需要以某种方式让离子知道我正在改变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

修改

当离子具有主要更新时，更容易破解的更简单的解决方案。

https://gist.github.com/haydenbr/7df417a8678efc404c820c61b6ffdd24

因此缓存与离子的破坏。这是一个hackish解决方案，但它现在有效。问题是离子构建系统有时抽象有点过多。回到10月份，有人问到是否有办法实现缓存清除。离子团队回应说他们将来可能会考虑它，但从那时起就没有任何活动。 Here's the github issue

因此，我将显示对webpack config和package.json的所有更改，然后解释所有内容。

package.json的config部分应如下所示。

"config": { "ionic_webpack": "./webpack.config.js", "ionic_source_map_type": "source-map", "ionic_uglifyjs": "./www/uglifyjs.config.json" }

对于您的webpack配置，您的输入和输出可以保持不变。确保您需要以下模块，然后您将要添加以下插件：

var path = require('path'), fs = require('fs'), ManifestPlugin = require('webpack-manifest-plugin'), HtmlWebpackPlugin = require('html-webpack-plugin');

...

plugins: [ new HtmlWebpackPlugin({ filename: './../index.html', inject: 'body', template: './src/index.html', title: 'My App', }), new ManifestPlugin(), updateFileName ]

其中updateFileName如下

function updateFileName() { this.plugin("done", function() { var manifest = require(process.env.IONIC_BUILD_DIR + '/manifest.json'), fileName = process.env.IONIC_OUTPUT_JS_FILE_NAME; updateUglifyConfig(fileName, manifest); process.env.IONIC_OUTPUT_JS_FILE_NAME = manifest[fileName]; }); } function updateUglifyConfig(fileName, manifest) { var uglifyConfig = { sourceFile: manifest[fileName], destFileName: manifest[fileName], inSourceMap: manifest[fileName + '.map'], outSourceMap: manifest[fileName + '.map'], mangle: true, compress: true, comments: true }; // we're writing this to www because it's specific to the current // build and we don't want to commit it fs.writeFileSync( path.join(__dirname, 'www', 'uglifyjs.config.json'), JSON.stringify(uglifyConfig, null, 4) ); }

那么这里到底发生了什么？首先，在package.json中，我们将不得不为离子构建过程生成一个新的uglify配置。您可以在构建过程中更改文件名，只要将新名称分配给process.env.IONIC_OUTPUT_JS_FILE_NAME，那么构建的其余部分将正常工作，除了uglify步骤仍将查找默认名称{ {1}}。我们将看到我们如何在下面生成。

现在我们要添加三个插件。

第一个做了一些魔术。它真的可配置。如何设置，它需要一个默认的index.html，设置标题，为javascript输出注入一个main.js标签，然后将它写入你在filename属性中指定的位置。如果您使用的是来自离子启动器应用程序的默认index.html，那么您需要做的就是摆脱<script>并自动将新链接放入其文件名中。哈希吧。 Docs here

下一个插件为我们输出一个清单文件，以便我们可以知道文件名与散列有什么关系。默认情况下，它会在<script src="build/main.js"></script>中输出。 Docs here

下一个插件是将新文件名分配给process.env.IONIC_OUTPUT_JS_FILE_NAME并为我们生成新的uglify配置。我们几乎抓住输出的清单，将新的uglify配置写入www目录，然后根据清单中的内容分配新的文件名。

就是这样。如果您不希望缓存破坏dev，请保留html插件，除去其他两个，然后将输出文件名更改回www/build/。如果这样做，您根本不需要引用process.env.IONIC_OUTPUT_JS_FILE_NAME中的主要js文件。无论你是在运行dev还是prod，它都会被放入。有关在不同环境中使用不同webpack设置的更多信息，请check this out。

<强>更新

对于离子3：

确保您在src/index.html：
的compilerOptions中设置了这些设置
tsconfig

"module": "es2015", "target": "es5"

在您的webpack配置中添加npm i cheerio --save-dev

摆脱Webpack Manifest插件。

将var cheerio = require('cheerio')更改为以下内容：

updateFileName

摆脱Html Webpack插件

代替html插件，将以下函数放入webpack配置的plugins数组中：

function updateFileName() { this.plugin("done", function(stats) { var buildOutput = stats.toJson()['assetsByChunkName']['main'], fileName = process.env.IONIC_OUTPUT_JS_FILE_NAME, manifest = { [fileName]: buildOutput[0], [fileName + '.map']: buildOutput[1] }; updateUglifyConfig(fileName, manifest); process.env.IONIC_OUTPUT_JS_FILE_NAME = manifest[fileName]; console.log('IONIC_OUTPUT_JS_FILE_NAME', process.env.IONIC_OUTPUT_JS_FILE_NAME); }); }

Answer 2

我找到了一个更好的解决方案，来自离子论坛线程（https://forum.ionicframework.com/t/file-revisions/75028/2，aszmyd），它解决了散列main.css文件名的问题。我对剧本做了一些小调整，因为我没有oauth.html或kajam.js。

这种解决方案的优势在于它不会尝试拦截离子构建，但只是对结果起作用。

（毫无疑问，有人会发现我发布此内容的方式有问题，但它对我来说非常有用，我希望其他人。我无法想象有一个网络应用程序没有完全缓存破坏所有人css和js文件。）

要运行此功能，只需添加：

node <the-file-name.js>

离子脚本构建完成后，在构建中

。

#!/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');
}

Answer 3

此solution与Ionic 2.x＆amp; 3.X

#!/usr/bin/env node

var fs = require('fs'),
    path = require('path'),
    cheerio = require('cheerio'),
    revHash = require('rev-hash');

/**
 *
 * @param string fileName
 * @returns string
 */
function hashFile(file) {

    // Get file name
    var fileName = file.replace(/\.[^/.]+$/, "");
    // Get file extension
    var re = /(?:\.([^.]+))?$/;
    var fileExtension = re.exec(file)[1];

    var filePath = path.join(buildDir, file);
    var fileHash = revHash(fs.readFileSync(filePath));
    var fileNewName = `${fileName}.${fileHash}.${fileExtension}`;
    var fileNewPath = path.join(buildDir, fileNewName);
    var fileNewRelativePath = path.join('build', fileNewName);
    //Rename file
    console.log("cache-busting.js:hashFile:Renaming " + filePath + " to " + fileNewPath);
    fs.renameSync(filePath, fileNewPath);

    return fileNewRelativePath;
}


var rootDir = path.resolve(__dirname);
var wwwRootDir = path.resolve(rootDir, 'www');
var buildDir = path.join(wwwRootDir, 'build');
var indexPath = path.join(wwwRootDir, 'index.html');
$ = cheerio.load(fs.readFileSync(indexPath, 'utf-8'));

$('head link[href="build/main.css"]').attr('href', hashFile('main.css'));
$('body script[src="build/main.js"]').attr('src', hashFile('main.js'));
$('body script[src="build/polyfills.js"]').attr('src', hashFile('polyfills.js'));
$('body script[src="build/vendor.js"]').attr('src', hashFile('vendor.js'));

fs.writeFileSync(indexPath, $.html());

Ionic 2更改main.js的名称（webpack.js output.filename设置）

3 个答案: