我有一个问题,我的所有资产(页面,js和CSS)都被缓存,并且在使用browsersync时不会刷新。
似乎只有硬刷新才能解决问题。
我在这里有我的webpack配置:
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();
}
}
}
]
})
]
};
值得注意的是,browserync甚至不能通过更改php文件(即不需要编译的相对静态文件)成功重新加载。所以我不认为它与文件没有成功编译有任何关系。
如何通过使用带有webpack的browsersync来查看我的更改?
如果您使用的是Chrome,请打开开发工具F-12,转到设置F1并检查网络部分下的Disable cache (while DevTools is open)
。