使用webpack 4.1.1和webpack-dev-server我有以下webpack.dev.js文件
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const src = path.resolve(__dirname, "../");
const build = path.resolve(__dirname, "../../build");
const components = path.resolve(__dirname, "../components");
const icons = path.resolve(__dirname, "../static/icons");
const images = path.resolve(__dirname, "../static/images");
const context = path.resolve(__dirname, 'src');
module.exports = {
mode: 'development',
entry: `${src}/index.js`,
output: {
filename: "bundle.js",
path: build
},
resolve: {
alias: {
components: components,
icons: icons,
images: images
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
path: build
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
],
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
plugins: [
"transform-react-jsx",
[
"react-css-modules",
{
context
}
]
]
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader',
options:{
modules: true
}
}
]},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
],
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
}
]
},
};
我的问题是,当我更新CSS文件时,我会看到终端,它表示它已成功编译,但是我没有看到浏览器中的更改。即使我直接导航到localhost:8080 / main.css,仍会显示旧的CSS文件。我可以让CSS成功重新编译的唯一方法是停止开发服务器并重新启动它。
FWIW,这是我的启动脚本:
$ ./node_modules/.bin/webpack-dev-server --config ./src/config/webpack.dev.js --content-base build/ --content-base src/static
有人能告诉我我在这里缺少什么吗?