Question

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

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

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

我尝试过的事情：

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

它根本没有帮助。

下面您可以找到我的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')
  }
};

如果我删除了devServer配置对象，但一切正常，但是我必须手动选择dist的网址

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')
  }
};

如果我设置dev-server的contentBase路径，则webpack不提供更新的文件

2 个答案: