0

我最近才遇到这个问题，但我无法弄清楚我的 webpack 设置有什么问题。

每次我保存我的 SCSS 文件 (./src/scss/) 更改时，webpack 都会刷新页面（我猜这是热模块重新加载），但在刷新之后，我的图像（应该从 html<img>标签加载）只是消失并返回 404 错误。

这仅在我保存src/ 文件夹中的文件时发生，并且如果我在保存 src/ 文件更改后立即保存我的 html（不在 ./src/ 文件夹中），图像就会重新出现！

关于如何解决这个问题的任何想法？（我正在使用 webpack 5）

我已经尝试了我在互联网上找到的所有东西，比如 target:'web' 或 hot module reload setting blahblah ...但没有任何效果。

我的文件夹结构：

在此处输入图像描述

这是我的webpack.config.js下面：

const fs = require('fs');
const webpack = require('webpack');
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const NO_COMPRESS = false;

module.exports = {
  entry:{
    main:['./src/js/main.js','./src/scss/main.scss']
  },
  output: {
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: '[id].[chunkhash].js',
    path: resolve(__dirname, 'build'),
    clean: true
  },
  target: 'web',
  devServer: {
    open: true,
    compress: true
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node-modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: !NO_COMPRESS
            }
          }
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name][ext]'
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../../'
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  require('postcss-preset-env')()
                ]
              }
            }
          },
          (() => {
            return NO_COMPRESS ? {
              loader: 'sass-loader',
              options: { sourceMap: true, sassOptions: { minimize: false, outputStyle: 'expanded' } }
            } : 'sass-loader'
          })()

        ]
      },
      {
        test: /\.(otf|eot|ttf|woff2?)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext]'
        }
      }

    ]
  },
  resolve: {
    alias: {
      '@img': resolve(__dirname, './src/assets/images/'),
      '@font': resolve(__dirname, './src/assets/fonts/'),
      '@libimg': resolve(__dirname, 'node_modules/@neux/ui-jquery/img')
    }
  },
  optimization: {
    minimize: !NO_COMPRESS,
    splitChunks: { name: 'vendor', chunks: 'all' }
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  plugins: [
    (() => {
      return NO_COMPRESS ? undefined : new OptimizeCssAssetsWebpackPlugin()
    })(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new HtmlWebpackPlugin({
      filename:'index.html',
      template:'index.html'
    })

  ].filter(function (x) {
    return x !== undefined;
  })
}

我的package.json：

{
  "name": "webpack-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --mode production",
    "dev": "npx webpack serve"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mizok/webpack-template.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mizok/webpack-template/issues"
  },
  "homepage": "https://github.com/mizok/webpack-template#readme",
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^5.2.1",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead",
    "IE 11"
  ]
}

index.html

4

1 回答 1

1

我也遇到过同样的情况。问题在于output.clean: true选项。
您可以将其删除或设置为false.

例如，我已经像这样更改了我的start命令，然后package.json像这样
"start": "cross-env NODE_ENV=development NODE_LIVE=true webpack-dev-server --mode development"
检查process.env.NODE_LIVEwebpack.config.json

const isDevserver = process.env.NODE_LIVE;

{
    ...
    output: {
        ...
        clean: !isDevserver
    },
    ...
}
于 2022-01-29T18:02:22.913 回答