Webpack

Question

我正在重建我自己的网站，我想在页面之间添加一些过渡。

在这个例子中，我的 src 文件夹中有两个 pug 文件：在 index.pug 我有一行代码 ( a(href='./about') Go to about ) 应该 link 到 about 网页。相反，我收到此错误 cannot get /.

如果我将其更改为 (a(href='./about.html Go to about) 并且运行这在生产中一切正常。

我的文件夹结构是：

dist/
  +-- index.html
  +-- about.html
  +-- main.css
  +-- main.bundle.js
  +-- vendor.bundle.js
node_modules/
src/
  +-- partials/
  +-- sass/
  +-- index.pug
  +-- about.pug
  +-- index.js
  +-- vendor.js
  +-- main.scss
.gitignore
package-lock.json
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js

webpack.common.js

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

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  },
  //plugins: [
  //  new HtmlWebpackPlugin({
  //    template: './src/index.pug'
  //  })
  //],
  module: {
    rules: [
      {
        test: /\.(svg|png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
         filename: 'images/[hash][ext][query]',
       }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      }
    ]
  }
};

webpack.prod.js

const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        template: "./src/index.pug",
        filename: 'index.html',
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      }),
      new HtmlWebpackPlugin({
        template: "./src/about.pug",
        filename: 'about.html',
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'simple-pug-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, //3. Creates separate CSS file
          'css-loader', //2. Turns css into js
          'sass-loader' //1. Turns sass into css
        ]
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          // Using file-loader will create another set of images and will link to the wrong images
          // As of Webpack 5.0, this can be handled without installing a loader at all. So file-loader, url-loader, raw-loader, etc. are now obsolete.
          // 
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  },
});

webpack.dev.js

const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'development',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'simple-pug-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader', //3. Injects css into the DOM
          'css-loader', //2. Turns css into js
          'sass-loader' //1. Turns sass into css
        ]
      },
    ]
  },
  devServer: {
    hot: true,
    liveReload: true,
    open: 'Google Chrome'
  },
  plugins: [
    new LiveReloadPlugin({  // LiveReloadPlugin is necessary in order to fix live reloading on the dev side
      appendScriptTag: true
    }),
    new HtmlWebpackPlugin({
      template: './src/index.pug'
    }),
    new HtmlWebpackPlugin({
      template: './src/about.pug'
    })
  ]
});

我尝试在 webpack.dev.js 的 HtmlWebpackPlugin 中添加一个新的 template （这在 production 中有效），但它只显示 about 页面在 localhost:8080 后跟这个错误：

Compiled with problems:X
ERROR
Conflict: Multiple assets emit different content to the same filename index.html

Answer 1

谷歌搜索后修复了它。原来我输出到同一个 index.html 文件。在 webpack.dev.js 中为每个 HtmlWebpackPlugin 添加不同的文件名解决了它。

Webpack - 链接 webpack-dev-server 上的其他 Pug 页面不起作用

Webpack - linking other Pug pages on webpack-dev-server doesn't work

javascript

webpack-dev-server

html-webpack-plugin

pug-loader