编辑
当 ionic 有重大更新时，更简单的解决方案不太可能中断。
https://gist.github.com/haydenbr/7df417a8678efc404c820c61b6ffdd24
所以用离子缓存破坏。这是一个骇人听闻的解决方案，但现在可以使用。问题是离子构建系统有时抽象得太多了。早在 10 月，有人问是否有办法实现缓存清除。ionic 团队回应称，未来可能会考虑，但此后一直没有任何活动。这是github问题。
所以我将展示对 webpack config 和 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
};
// 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 中，我们将不得不为 ionic 构建过程生成一个新的 uglify 配置。您可以在构建过程中更改文件名，只要将新名称分配给，process.env.IONIC_OUTPUT_JS_FILE_NAME那么构建的其余部分就可以正常工作，除了 uglify 步骤仍将查找默认名称main.js. 我们将在下面看到如何生成它。
现在对于我们要添加的三个插件。
第一个有一些魔力。它真的是可配置的。它是如何设置的，它需要一个默认的 index.html，设置标题，<script>为 javascript 输出注入一个标签，然后将它写入你在 filename 属性中指定的位置。如果您使用的是来自 ionic starter 应用程序的默认 index.html，那么您需要做的就是摆脱<script src="build/main.js"></script>它，它会自动将新链接放入其中包含哈希的文件名中。文档在这里。
下一个插件为我们输出一个清单文件，这样我们就可以知道文件名是什么和哈希。默认情况下，它以www/build/. 文档在这里。
下一个插件将新文件名分配给 process.env.IONIC_OUTPUT_JS_FILE_NAME 并为我们生成新的 uglify 配置。几乎我们抓取了输出的清单，将一个新的 uglify 配置写入 www 目录，然后根据我们从清单中得到的新文件名分配新的文件名。
差不多就是这样。如果您不希望 dev 的缓存破坏，请保留 html 插件，摆脱其他两个，然后将输出文件名更改回process.env.IONIC_OUTPUT_JS_FILE_NAME. 如果你这样做，你根本不需要引用你的主 js 文件src/index.html。无论您正在运行的开发人员还是产品，它都会被放入。有关在不同环境中使用不同 webpack 设置的更多信息，请查看。
更新：
对于离子 3：
- 确保您的 中具有以下
compilerOptions设置tsconfig：
"module": "es2015", "target": "es5"
npm i cheerio --save-dev- 在你的 webpack 配置中添加
var cheerio = require('cheerio')
- 摆脱 Webpack Manifest 插件。
更改updateFileName为以下内容：
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);
});
}
摆脱 Html Webpack 插件
代替 html 插件，将以下函数放入 webpack 配置的 plugins 数组中：
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()
);
});
}