编辑
这是一个更简单的解决方案，当ionic进行重大更新时，它不太可能出现问题。
https://gist.github.com/haydenbr/7df417a8678efc404c820c61b6ffdd24
这是有关Ionic的缓存破解。虽然这是一个hackish的解决方案，但它现在可以使用。问题在于Ionic构建系统有时抽象得有点过头了。去年十月份，有人问是否有一种实现缓存破解的方法。Ionic团队回复说他们可能会在将来考虑它，但自那以后就没有任何活动了。
这里是Github问题链接。
因此，我将展示webpack配置和package.json的所有更改，然后解释一切。
您的package.json的配置部分应如下所示。
"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
};
fs.writeFileSync(
path.join(__dirname, 'www', 'uglifyjs.config.json'),
JSON.stringify(uglifyConfig, null, 4)
);
}
所以这里实际上发生了什么？首先，在package.json中，我们将不得不为ionic构建过程生成一个新的uglify配置。您可以在构建过程中更改文件名，只要将新名称分配给
process.env.IONIC_OUTPUT_JS_FILE_NAME，则构建的其余部分将正常工作，除了uglify步骤仍将查找默认名称
main.js。我们将看到如何生成它。
现在是我们要添加的三个插件。
第一个插件有些神奇。它真的很可配置。设置方式是获取一个默认的index.html，设置标题，注入javascript输出的<script>标签，然后将其写入您在filename属性中指定的位置。如果您使用从ionic starter应用程序中获取的默认index.html，则只需摆脱<script src="build/main.js"></script>，它将自动将带有哈希的新链接放在那里。此处的文档。
下一个插件会输出清单文件，以便我们知道带有哈希的文件名。默认情况下，它会在
www/build/中输出。
文档在此处。
下一个插件会将新的文件名分配给
process.env.IONIC_OUTPUT_JS_FILE_NAME，并且为我们生成新的uglify配置。基本上，我们获取输出的清单，将新的uglify配置写入www目录，然后从清单中获取新的文件名进行分配。
所以基本上就是这样。如果您不想在开发中使用缓存破坏，请保留html插件，删除其他两个，并将输出文件名更改回
process.env.IONIC_OUTPUT_JS_FILE_NAME。如果这样做，您就无需在
src/index.html中引用主js文件。无论你是运行dev还是prod，它都会被放置在其中。有关在不同环境中使用不同webpack设置的更多信息，
请查看此处。
更新：
对于Ionic 3：
- 确保在
tsconfig的compilerOptions中设置了以下选项：
"module": "es2015", "target": "es5"
npm i cheerio --save-dev- in your webpack config add
var cheerio = require('cheerio')
- Get rid of the Webpack Manifest plugin.
Change updateFileName to the following:
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);
});
}
Get rid of the Html Webpack Plugin
In place of the html plugin, put the following function in the plugins array in your webpack config:
function updateIndexHTML() {
this.plugin("done", function(stats) {
var buildOutput = stats.toJson()['assetsByChunkName']['main'],
outputFileName = buildOutput[0],
currentIndexHTML = fs.readFileSync(
path.join(__dirname, 'src', 'index.html'),
{ encoding: 'utf8' }
),
$ = cheerio.load(currentIndexHTML);
$('body').append(`<script src="build/${outputFileName}"></script>`);
fs.writeFileSync(
path.join(process.env.IONIC_WWW_DIR, 'index.html'),
$.html()
);
});
}
