如何使webpack观看简单的脚本

Question

我有一个网站，我正在介绍一些反应。

我的package.json中有一个脚本，它只有：

"dev": "webpack --watch"

虽然不起作用。每次更新脚本时，都应该刷新输出文件，但不是。

我想念什么？

这是我的webpack：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const postcssPresetEnv = require("postcss-preset-env");

const devMode = process.env.NODE_ENV !== "production";
module.exports = {
    mode: devMode ? "development" : "production",
    entry: {
        "style.main": [
            "./Content/css/bootstrap.min.css",
            "./Content/sass/public/style.scss"
        ],
        "app": [
            "./app/src/app.js"
        ]
    },
    output: {
        path: path.resolve(__dirname, "content/dist"),
        publicPath: "/css",
        filename: "js/[name].js"
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(c|sa|sc)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            importLoaders: 2
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            ident: "postcss",
                            plugins: devMode
                                ? () => []
                                : () => [
                                    postcssPresetEnv({
                                        browsers: [">1%"]
                                    }),
                                    require("cssnano")()
                                ]
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            publicPath: "../images",
                            emitFile: false
                        } 
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? "css/[name].css" : "css/[name].min.css"
        })
    ]
};

app.js就是这样：

console.log('Webpack watch is not working again');

我想每次我在app.js中修改它时，它都应该刷新控制台中的消息吗？

我正在使用webpack 4.41.6和webpack-cli 3.3.11

编辑

我实际上在VS任务运行器中运行了开发脚本（称为webpack --watch），每次保存时我都能看到它正在编译源代码，但是dist在浏览器中并没有真正刷新。

这是唯一的问题。

Answer 1

您必须使用Webpack update the browser manually来watch mode。如果要自动刷新和HMR，请阅读如何设置webpack-dev-server。