生产中的 webpack 加载旧的缓存较少的文件而不是新的服务器较少答案

【问题标题】：webpack in production loads old cached less files instead of new server less生产中的 webpack 加载旧的缓存较少的文件而不是新的服务器较少
【发布时间】：2021-03-18 17:24:58
【问题描述】：

我是第一次将我的 ReactJS/less/webpack 站点上传到远程服务器，但唯一的问题是生产中的 webpack 似乎正在缓存我的 less 样式的旧版本。我绝对可以在 cPanel 文件目录中看到“public_html”中的较少文件是最新的（从我的 github 中提取），但是当我自己实际点击页面并直接检查元素时，样式/代码显然是一个过时的版本，即将到来来自“webpack://Navbar.less”等来源。我的本地产品非常好，始终是最新的。

我尝试过清除缓存、硬刷新 CTRL+SHIFT+R、多个浏览器等，但没有任何效果。

我是否缺少 webpack 配置？我需要实现散列/缓存破坏或其他什么吗？我尝试在“HtmlWebpackPlugin”对象中添加“hash：true”，但没有改变。请帮忙。

//webpack.common.js

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

module.exports = {
   entry: './main.js',
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
               presets: ['@babel/preset-env', '@babel/preset-react']
            }
         },
         {
           test: /\.less$/,
              use: [
                {
                  loader: 'style-loader',
                },
                {
                  loader: 'css-loader',
                },
                {
                 loader: 'resolve-url-loader',
               },
                {
                  loader: 'less-loader',
                  options: {
                    lessOptions: {
                      strictMath: true,
                    },
                  },
                },
              ],
         },
         {
           test: /.*\.(gif|png|jpe?g|svg)$/i,
           use: [
             {
               loader: 'file-loader',
               options: {
                 name: '[name].[ext]',
                outputPath: 'static/assets/',
                publicPath: 'prod/static/assets/',
                 emitFile: true,
                 byPassOnDebug: true,
                 disable: true
               }
             },
             {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  progressive: true,
                },
                // optipng.enabled: false will disable optipng
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.65, 0.90],
                  speed: 4
                },
                gifsicle: {
                  interlaced: false,
                },
                // the webp option will enable WEBP
                webp: {
                  quality: 75
                }
              }
            }
           ]
         }
          
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html',
         hash: true
      }),
      new webpack.DefinePlugin({
        PICS_DIR: JSON.stringify('../www/img/pics/')
      })
   ]
}

webpack.production.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');

module.exports = merge(common, {
    mode: 'production',
    output: {
      path: path.join(__dirname, '/prod'),
      filename: 'index.js'
   },
});

【问题讨论】：

标签： reactjs webpack less production-environment less-loader

【解决方案1】：

我在网络服务器中使用“文件管理器”的方式存在问题。我的样式更新现在正在运行。

【讨论】：