如何配置 webpack-dev-server 以自动监视我的 src 文件夹以查找源代码的更改？

Question

我下载了 webpack v5.75.0，我有一个小项目，文件夹结构如下：

`

my-project
-dist
--index.html
--assets
---bundle.js
-src
--index.js
package.json
webpack.config.js

`

我通过 npm 安装了 webpack-dev-server，我希望它保持运行，同时观察我的 -src 目录中的任何代码更改，这样 -dist 目录中的所有文件都会在我保存对源的更改时自动更新代码。

下面是我的 package.json 文件中的开发依赖项： `

        "devDependencies": {
        "webpack": "^5.75.0",
        "webpack-cli": "^5.0.1",
        "webpack-dev-server": "^4.11.1"
      }

`

下面是我的 webpack.config.js 文件的内容： `

const path = require('path');

module.exports = {
  mode: 'development',
  watch: true,
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist', 'assets'),
    publicPath: './dist/assets',
  },
  devServer: {
    static: './src',
  },
};

`

我使用以下命令运行 webpack 开发服务器： npx webpack-dev-server

但是当我在 index.js 中保存更改时，它不会像我期望的那样在 bundle.js 中自动更新。

我怀疑问题出在我的 webpack.config.js 文件上，但我不确定我做错了什么。

我尝试将 webpack.config.js devServer 对象配置为指向 ./dist 目录，如下所示：

devServer: {
    static: './dist',
  },

Answer 1

我在文件夹和文件中有相同的设置。

首先我创建了一个 dev.config.js 文件并将其添加到 package.json 的脚本部分，如下所示：

  "scripts": {
    "dev": "webpack-dev-server --config ./dev.config.js",
  },

我认为问题出在您的 config.sys 中。它应该是这样的：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/assets'),
        filename: 'bundle.js',
        clean: true,
    },   
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'), // points to index.html location           
        },
        devMiddleware: {
            publicPath: '/assets/'  // this is very, very important if you want this to run
        },        
        hot: true,
        open: true,
    },               
}

您的 devServer 指向源文件夹，而不是 index.html 的位置（在 dist 文件夹中）。

您需要为 devServer 设置公共路径并将其指向正确的位置（您的 bundle.js 所在的位置）。像上面一样创建一个 devMiddleware 部分并将其添加到您的配置文件中。

你不需要看文件，因为 webpack-dev-server 会为你处理这个。

在此之后你的环境应该按预期运行