webpack в продакшене загружает меньше старых кешированных файлов вместо нового сервера меньше

Я впервые загружаю свой сайт ReactJS / less / webpack на удаленный сервер, но единственная проблема заключается в том, что производственный веб-пакет, похоже, кэширует старую версию моих стилей less. Я определенно могу видеть в каталоге файлов cPanel, что файлы less в public_html являются текущими (извлечены из моего github), но когда я на самом деле сам попадаю на страницу и проверяю элемент напрямую, стиль / код явно является устаревшей версией, исходящей из источников например webpack: //Navbar.less. Моя местная продукция в порядке, всегда актуальна.

Я попытался очистить кеш, выполнить жесткое обновление CTRL + SHIFT + R, использовать несколько браузеров и т. Д., Ничего не сработало.

Мне не хватает конфигурации веб-пакета? Мне нужно реализовать хеширование / очистку кеша или что-то в этом роде? Я попытался добавить hash: true в объект HtmlWebpackPlugin, но без изменений. Пожалуйста помоги.

//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'
   },
});

person ApolloXI    schedule 07.12.2020    source источник


Ответы (1)


Это была проблема, связанная с тем, как я использовал диспетчер файлов на своем веб-сервере. Мои обновления стиля теперь работают.

person ApolloXI    schedule 13.12.2020