我使用在angular 2上开发了我的项目。每当我部署新构建时,客户端都需要清除缓存,以便查看代码所做的更改。下面是我的webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const typescript = require('typescript');
const { AotPlugin } = require('@ngtools/webpack');
const rules = [
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
{ test: /\.(jpe?g|png|gif|svg)$/i, loader: 'file-loader' }
];
const plugins = [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module) => module.context && /node_modules/.test(module.context)
})
];
rules.push({
test: /\.ts$/,
loaders: [
'awesome-typescript-loader', 'angular-router-loader', 'angular2-template-loader'
]
});
plugins.push(
new webpack.NamedModulesPlugin(),
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.resolve(__dirname, './notfound')),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
beautify: false,
mangle: {
screw_ie8: true
},
compress: {
unused: true,
dead_code: true,
drop_debugger: true,
conditionals: true,
evaluate: true,
drop_console: true,
sequences: true,
booleans: true,
screw_ie8: true,
warnings: false
},
comments: false
})
);
module.exports = {
cache: true,
context: __dirname,
devServer: {
contentBase: __dirname,
historyApiFallback: true,
stats: {
chunks: true,
chunkModules: true,
chunkOrigins: true,
errors: true,
errorDetails: true,
hash: true,
timings: true,
modules: true,
warnings: true
},
publicPath: './build/',
port: 3000
},
devtool: 'sourcemap',
entry: {
app: ['zone.js/dist/zone', './app/main.ts']
},
output: {
filename: '[name].js',
chunkFilename: 'lfd6093bc62332f579200891cc0e9c8[name].js',
publicPath: './build/',
path: path.resolve(__dirname, 'build')
},
node: {
console: true,
global: true,
process: true,
Buffer: false,
setImmediate: false
},
module: {
rules
},
resolve: {
extensions: ['.ts', '.js'],
modules: [
'app',
'node_modules'
]
},
plugins
};
有没有一种方法可以让我只在客户端的上克服这个问题?如果没有,我最后的手段将是检查api版本,并给用户弹出窗口来清除缓存。
发布于 2018-05-28 19:47:09
默认情况下,Webpack不知道文件是否发生了更改,但您可以通过更改输出文件名并在其上添加contenthash
来帮助webpack:
output: { filename: '[name].[contenthash].js'}
通过这样做,将生成基于文件内容的哈希,如果文件内容发生更改,此哈希更改,以便webpack知道它必须重新构建所有内容。
https://stackoverflow.com/questions/50541688
复制相似问题