Question

我正在为Vue开发服务器端渲染器，并且正在将webpack dev server用作开发服务器。它已经可以很好地工作了，我已经设置了服务器，以便在其中一个源文件被更改时触发构建。当然，它是开箱即用的，因为我的源文件是entry配置中webpack的一部分。

现在使用Vue，您还可以指向一个html文件，该文件用作服务器端渲染的模板。将HTML文件传递给Vue进行服务器端渲染是相当简单的。

现在，我想做的是每次Vue文件更改时更新html服务器端渲染器。因此，基本上我要做的就是分别告诉webpack或webpack dev server还要监视该html文件上的文件更改。

我该怎么做？

对于上下文，这是我的webpack配置的要点：

module.exports = {
  entry: {
    client: 'src/path/to/client.js',
  },
  output: {
    path: appDist,
    publicPath: '/',
    filename: '[name].[chunkhash].js',
  },
  resolve: {
    extensions: ['.vue', '.js', '.json', '.mjs'],
  },
  module: {
    rules: [/* ...*/],
  },
  /* some other options here */
  devServer: {
    contentBase: [appDist, appPublic],
    publicPath: '/',
    port: 8080,
    compress: false,
    overlay: true,
    quiet: true,
  }
};

现在我也想告诉webpack何时也触发重建

'public/index.html'

更改。

请注意，我像这样手动调用webpack和开发服务器

const compiler = webpack([config.client, config.server]);
const devServer = new WebpackDevServer(compiler, config.devServer);

因此，我也拥有JavaScript的所有选项，因此无法通过配置来实现

Webpack Dev Server包含其他文件供观看

0 个答案: