Pug + webpack-dev-server

Question

我正在使用webpack v4，我正在尝试使用Pug和webpack-dev-server但是当我运行webpack-dev-server --mode development它不会提供编译的Pug 。 请帮忙。 我不知道该怎么办。 谢谢你的答复。 这是我的配置：

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/main.js', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\\.pug$/, use: { loader: 'pug-loader', options: { pretty: true } } } ] }, devServer: { contentBase: path.join(__dirname, 'dist'), hot: true, open: true, progress: true }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/templates/pages/index.pug'), inject: false }) ] }; 

Answer 1

你好，你必须在HtmlWebpackPlugin上指定文件名，这样你就可以从localhost：3000或localhost：3000 / index.html提供你的html。

devServer: {
     ...,
     port: 3000
}
...
plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/templates/pages/index.pug'),
      filename: 'index.html'
    })
  ]