如果我设置开发服务器的 contentBase 路径，webpack 不会提供更新的文件

Question

我正在尝试为我的项目设置环境，但我遇到了 webpack-dev-server 的问题。

如果我使用以下配置并且不添加 devServer 配置对象，一切正常。我可以打开我的项目进入 dist 然后我会看到我的项目，如果我在我的 .ts 文件中更改某些内容，它将更新，但是当我添加选项并设置 contentBase 然后在我之后运行 webpack-dev-server 它将打开 dist 但使用永远不会更新的旧 bundle.js 文件。

有什么方法可以设置开发服务器的默认 url 并在我更改文件中的某些内容后查看更改？

我尝试了什么：

添加watchOptions: { poll: true }
添加watchContentBase: true
添加hot: true
添加自定义端口port: 9000

It didn't helped at all.

下面你可以找到我的 webpack.config.json:

const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: [
            path.resolve(__dirname, 'src')
        ]
      }
    ]
  },
  resolve: {
    extensions: [
        '.ts',
        '.js'
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    watchContentBase: true,
    hot: true,
    port: 9000,
    watchOptions: {
      poll: true
    }
  },
  output: {
    publicPath: 'dist',
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

If I remove devServer config object than everything works fine but I have to choose url to dist manually

Answer 1

好的，所以我重新创建了您的解决方案，这对我有用：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: [
          path.resolve(__dirname, 'src')
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.ts',
      '.js'
    ]
  },
  devServer: {
    publicPath: '/',
    contentBase: path.join(__dirname, 'public/dist'),
    watchContentBase: true,
    hot: true,
    host: 'localhost',
    port: 3000,
    watchOptions: {
      poll: true
    }
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/dist')
  },
  plugins: [
    // Re-generate index.html with injected script tag.
    // The injected script tag contains a src value of the
    // filename output defined above.
    new HtmlWebpackPlugin({
      inject: true,
      template: path.join(__dirname, 'public/index.html'),
    }),
  ],
};

那我运行npx webpack-dev-server。 html 看起来像：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<div id="root"></div>
</body>
</html>

而项目的结构是：

在那之后，热重载在 http://localhost:3000/ 上运行得很好。希望对您有所帮助！

Answer 2

问题出在 publicPath 定义中。 publicPath 声明不正确。 publicPath 应该用 / 初始化，但在我的配置中它是 dist。所以这就是 webpack 没有更新的原因 bundle.js，因为它看错了目录。

所以正确的配置应该是这样的：

const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: [
            path.resolve(__dirname, 'src')
        ]
      }
    ]
  },
  resolve: {
    extensions: [
        '.ts',
        '.js'
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist')
  },
  output: {
    publicPath: '/', // NOW PUBLIC PATH IS CORRECT
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

如果我设置开发服务器的 contentBase 路径，webpack 不会提供更新的文件

If I set contentBase path of dev-server, webpack doesn't serve updated files

javascript

webpack

webpack-dev-server