为什么webpack + pug会生成一个Entrypoint undefined = ./index.html错误？

问题描述

问题的实质是：在webpack上有一个构建，除了一个例外，一切工作正常：更改PUG文件时。 重建了项目，但是内容没有在浏览器中更新。 构建时会产生错误：Entrypoint undefined = ./index.html

    const path = require('path');
const fs = require('fs');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');


const PATHS = {
  src: path.join(__dirname,'./src'),dist: path.join(__dirname,'./dist'),assets: 'assets/',pages: function () { return `${this.src}/pug/` }
}

// const PAGES_DIR = PATHS.src
const PAGES = fs.readdirsync(PATHS.pages()).filter(fileName => fileName.endsWith('.pug'));

const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev

const optimization = () => {
  const config = {
    splitChunks: {
      chunks: 'all'
    }
  }

  if (isProd) {
    config.minimizer = [
      new OptimizeCssAssetWebpackPlugin(),new TerserWebpackPlugin()
    ]
  }

  return config
}

const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`

const cssLoaders = extra => {
  const loaders = [
    {
      loader: MiniCssExtractPlugin.loader,options: {
        hmr: isDev,reloadAll: true
      },},'css-loader'
  ]

  if (extra) {
    loaders.push(extra)
  }

  return loaders
}

const babelOptions = preset => {
  const opts = {
    presets: [
      '@babel/preset-env'
    ],plugins: [
      '@babel/plugin-proposal-class-properties'
    ]
  }

  if (preset) {
    opts.presets.push(preset)
  }

  return opts
}

const jsLoaders = () => {
  const loaders = [{
    loader: 'babel-loader',options: babelOptions()
  }]

  if (isDev) {
    loaders.push('eslint-loader')
  }

  return loaders
}

const plugins = () => {
  const base = [
    new CleanWebpackPlugin(),new copyWebpackPlugin([
      { from: `${PATHS.src}/${PATHS.assets}img`,to: `${PATHS.assets}img` },{ from: `${PATHS.src}/${PATHS.assets}fonts`,to: `${PATHS.assets}fonts` },{ from: `${PATHS.src}/static`,to: '' },]),new MiniCssExtractPlugin({
      filename: filename('css')
    }),...PAGES.map(page => new HTMLWebpackPlugin({
      template: `${PATHS.pages()}/${page}`,filename: `./${page.replace(/\.pug/,'.html')}`,}))
  ]


  return base
}

module.exports = {
  context: PATHS.src,mode: process.env.NODE_ENV,entry: {
    app: PATHS.src,output: {
    filename: filename('js'),path: PATHS.dist
  },resolve: {
    extensions: ['.js','.json','.png'],alias: {
      '@': PATHS.src,}
  },optimization: optimization(),devServer: {
    hot: isDev
  },devtool: isDev ? 'source-map' : '',plugins: plugins(),module: {
    rules: [
      {
        test: /\.pug$/,loader: 'pug-loader',options: {
          pretty: isProd
        }
      },{
        test: /\.css$/,use: cssLoaders()
      },{
        test: /\.s[ac]ss$/,use: cssLoaders('sass-loader')
      },{
        test: /\.(png|jpg|svg|gif)$/,use: ['file-loader']
      },{
        test: /\.(ttf|woff|woff2|eot)$/,{
        test: /\.xml$/,use: ['xml-loader']
      },{
        test: /\.csv$/,use: ['csv-loader']
      },{
        test: /\.js$/,exclude: /node_modules/,use: jsLoaders()
      }
    ]
  }
}

项目结构： enter image description here

解决方法

您尝试过html-webpack-pug-plugin吗？

npm i html-webpack-pug-plugin

替换此：

const plugins = () => {
    const base = [
        //..
        ...PAGES.map(page => new HTMLWebpackPlugin({
            template: `${PATHS.pages()}/${page}`,filename: `./${page.replace(/\.pug/,'.html')}`,}))
    ]
//...

与此：

const plugins = () => {
    const base = [
        //..
        new HtmlWebpackPugPlugin(),new HtmlWebpackPlugin({
            template: './src/pug/index.pug',filename: 'index.pug',})
    ]
//...

该插件将参照js和CSS文件将主index.pug文件复制到dist目录。

然后，静态目录中的pug文件应像这样加载主模板文件：

extends ../../dist/index.pug

,

我已经通过附加软件包chokidar解决了这个问题。

我使用下一个代码：

    const chokidar = require('chokidar');
   ...
  devServer: {
    hot: true,overlay: {
      warnings: false,errors: true
    },before(app,server) {
      chokidar.watch([
        `${PATHS.src}/**/*.pug`
      ]).on('all',function() {
        server.sockWrite(server.sockets,'content-changed');
      })
    }
  }
   ...