[Новинка в webpack]проблема с автопрефиксом в плагине манифеста webpack

Я попытался использовать плагин манифеста веб-пакета для создания файла manifest.json, в котором есть ключи и значения моих активов с contenthash в его имени, но он включает префикс «auto» в значении, а мой index.html имеет href и src с префиксом ключевое слово « auto" в пути также. И он не работает на тестовом сервере, потому что не может найти настоящие файлы. Как я могу это исправить?

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const {
  WebpackManifestPlugin
} = require('webpack-manifest-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  //watch: true,
  mode: "production",
  devtool: "eval-cheap-module-source-map",
  entry: {
    application: "./src/index.js",
    admin: './src/admin.js'
  },
  output: {
    filename: "[name]-[contenthash].js",
    path: path.resolve(__dirname, 'build')
  },
  optimization: {
    minimizer: [
      new TerserJSPlugin({}),
      new OptimizeCssAssetsPlugin({})
    ]
  },
  module: {
    rules: [{
        test: /\m?js$/,
        exclude: '/(node_modules|bower_components)/',
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/i,
        use: [
          //'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: ''
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          }, {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')({
                    overrideBrowserslist: ['last 3 versions', 'ie >9']
                  })
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.scss$/i,
        use: [
          //'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: ''
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')({
                    overrideBrowserslist: ['last 3 versions', 'ie >9']
                  })
                ]
              }
            }
          }, 'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [{
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[hash:7].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader'
          }
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          variable: 'data',
          interpolate: '\\{\\{(.+?)\\}\\}',
          evaluate: '\\[\\[(.+?)\\]\\]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html'
    }),
    new WebpackManifestPlugin({

    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name]-[contenthash].css"
    })
  ]
}

Manifest.json {
  "application.css": "autoapplication-4a5eb857061be614f4b2.css", "application.js": "autoapplication-b35460853f853e901d54.js", "application.jpg": "autobooks.df4be51.jpg", "admin.css": "autoadmin-4a5eb857061be614f4b2.css", "admin.js": "autoadmin-00cdbe24c96699757b97.js", "admin.jpg": "autobooks.df4be51.jpg", "books.jpg": "autobooks.df4be51.jpg"
}

<!doctype html>
<html lang = "en" dir = "ltr">

<head>
  <meta charset = "utf-8">
  <title>My Custom template</title>
  <link href = "auto/application-4a5eb857061be614f4b2.css" rel = "stylesheet">
  <link href = "auto/admin-4a5eb857061be614f4b2.css" rel = "stylesheet">
</head>

<body>
  <p style = "background:white">Test Template</p>
  <script src = "auto/application-b35460853f853e901d54.js"></script>
  <script src = "auto/admin-00cdbe24c96699757b97.js"></script>
</body>

</html>

javascript npm webpack

11.12.2020 03:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 163

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

TLDR; Обновление publicPath конфигурации вашего веб-пакета до «» должно решить проблему.

Подробности: Скорее всего, вы перешли на webpack 5. Дополнительные сведения см. в документации по миграции webpack5: https://webpack.js.org/migrate/5/

Not all ecosystem tooling is ready for the new default automatic publicPath via output.publicPath: "auto"
Use a static output.publicPath: "" instead.

13.12.2020 04:19

Кулак, тебе нужно

postcss.config.js в /:

module.exports = {
    plugins: [
      require('autoprefixer')({
          overrideBrowserslist:
         ['last 3 versions', 'ie >9']})
    ]
  }

Удалить в .css и sass:

plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 3 versions', 'ie >9']
})

И изменить:

devtool: "eval-cheap-module-source-map",

для :

 devtool: 'source-map',

Это файл manifest.json перед выполнением:

{
"application.css": "autoapplication.css",
"application.js": "autoapplication.js",
"admin.css": "autoadmin.css",
  "admin.js": "autoadmin.js",
}

Бегать :

npm run build / or npm run prod

Теперь откройте manifest.json:

{
  "application.css": "autoapplication.css",
  "application.js": "autoapplication.js",
  "application.css.map": "autoapplication.css.map",
  "application.js.map": "autoapplication.js.map",
  "admin.css": "autoadmin.css",
  "admin.js": "autoadmin.js",
  "admin.css.map": "autoadmin.css.map",
  "admin.js.map": "autoadmin.js.map"
}

() ==>: Source map указывает на источник нашего журнала сообщений.

09.01.2021 17:24

Другие вопросы по теме

Как сделать так, чтобы index.html отображался в сборке svelte npm run

Как сделать горячую перезагрузку при использовании «веб-пакета» в Webpack 5

[email protected]: "узел" движка несовместим с этим модулем

Рабочие области NPM 7 — как установить новый пакет в рабочую область?

Канал npm Azure Artifacts не устанавливает все зависимости из вышестоящего источника

WebStorm не может найти npm

Должен ли я копировать package-lock.json в образ контейнера в Dockerfile?

MarkCompactCollector: сбой продвижения молодого объекта Ошибка выделения

Почему я не могу поймать ошибку, выдаваемую node-postgres?

¿Как я могу добавить npm install --force, когда я запускаю ионную сборку Android?

[Новинка в webpack]проблема с автопрефиксом в плагине манифеста webpack

Ответы 2

Другие вопросы по теме

Похожие вопросы