如何保存 webpack-dev-server 更改？

Posted 2023-05-07

【中文标题】如何保存 webpack-dev-server 更改？

【英文标题】：How could I save webpack-dev-server changes?

【发布时间】：2020-04-10 10:58:25

【问题描述】：

我正在使用 Xampp 进行 php 开发。 此外，我在 MVC 架构中用 javascript 编写代码。当我在 NPM 中运行 "dev": "webpack --mode development" 时，一切正常，我看到 bundle.js 发生了变化。但是当我运行 "start": "webpack-dev-server" 并转到 localhost:8080/js/bundle.js 时，我看到了更改，但实际上并没有保存。因为我去我的虚拟主机，没有任何变化！ 我怎样才能准确地保存更改？为什么会这样？ 这是我的 webpack 配置：

module.exports = 
    entry: ["babel-polyfill","./resources/assets/js/hadi/index.js"],
    output: 
        path: path.join( __dirname, 'public/js'),
        publicPath: '/js/',
        filename: 'bundle.js'
    ,
    devServer: 
        contentBase: path.join(__dirname, 'public'),
    ,
    module: 
        rules: [
            
                test: /\.js$/,
                exclude: /node_modules/,
                use:
                    loader: "babel-loader"
                
            
        ]
    
;

【参考方案1】：

webpack 的开发服务器并不是用来保存任何东西的，它只是一个具有实时重载、热模块和许多其他功能的开发服务器。 当您运行 webpack 命令（如构建）时，它实际上会创建输出文件，您的 javascript 包和静态资产将复制到您的 dist 文件夹，具体取决于您的配置。

生产包的大小要轻得多，因此可以部署，而开发服务器只是在运行时将一个临时包存储在内存中。

【讨论】：

那么有没有办法保存呢？每次更新都应该运行npm run dev？

根据您的配置是的，您还应该检查webpack.js.org/guides/production，以便您知道如何配置您的生产版本