带有browsersync的Webpack正在缓存所有内容,而不是加载新版本
我有一个问题,在使用browsersync时,我的所有资产(页面、js和css)都被缓存而没有刷新 似乎只有硬刷新才能解决问题 我在这里有我的网页配置:带有browsersync的Webpack正在缓存所有内容,而不是加载新版本,webpack,browser-sync,Webpack,Browser Sync,我有一个问题,在使用browsersync时,我的所有资产(页面、js和css)都被缓存而没有刷新 似乎只有硬刷新才能解决问题 我在这里有我的网页配置: const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const BrowserSyncPlugin = require("browser-sync-webpa
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");
module.exports = {
// Get everything from this file
entry: "./assets/app.js",
// Watch the files, so if anything changes, recompile
watch: true,
// Put the JavaScript file here
output: {
filename: "[name].[chunkhash].js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: { minimize: true }
},
{
loader: "postcss-loader", // Run post css actions
options: {
plugins: function() {
// post css plugins, can be exported to postcss.config.js
return [require("precss"), require("autoprefixer")];
}
}
},
"sass-loader"
]
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new ManifestPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.[contentHash].css",
chunkFilename: "[id].css"
}),
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: "localhost",
port: 3000,
proxy: "http://kinship.eightarms/",
reloadDelay: 500,
files: [
{
match: ["**/*.php", "**/*.css", "**/*.js"],
fn: function(event, file) {
if (event === "change") {
const bs = require("browser-sync").get("bs-webpack-plugin");
bs.reload();
}
}
}
]
})
]
};
值得注意的是,对php文件(即不需要编译的相对静态文件)进行更改后,browsersync甚至无法成功重新加载。所以我不认为这与文件没有被成功编译有任何关系
如何在使用browsersync with webpack进行更改时查看更改?如果使用Chrome,请打开开发工具F-12,转到设置F1并选中网络部分下的禁用缓存(当DevTools打开时)