Npm build: aot --prod Дубликат файла исходной карты для dist / main-xxx.css

Я использую webpack и Angular 6. Со вчерашнего дня и без видимых изменений в файлах css я не компилировал сборку npm run: aot: prod из-за проблемы с созданием main-xxx.css, ошибка bugsnag сообщает мне, что это пытается переписать уже существующий файл и не завершает сборку.

Забавно, что на сервере deploy, если он правильно компилируется, а на моем компьютере это не так, я получаю следующую ошибку: Конфликт (409) - дублированный файл исходной карты для dist / main-f751fc480956a7a013da.css. Этим утром был момент, когда он завершил сборку, но в большинстве случаев - нет. Я нашел решение для настройки override: true в BugsnagSourceMapUploaderPlugin, но мне это не нравится, так как раньше эта ошибка никогда не воспроизводилась.

Похоже, он дважды пытается скомпилировать css (созданный с помощью sass).

Если кто-то столкнулся с такой же проблемой или знает, как отлаживать, чтобы найти неисправность, это мне очень поможет. Заранее большое спасибо.

Это моя конфигурация webpack-prod

/**
 * @author: @AngularClass
 */
const helpers = require('./helpers');
const buildUtils = require('./build-utils');

/**
 * Used to merge webpack configs
 */
const webpackMerge = require('webpack-merge');
/**
 * The settings that are common to prod and dev
 */
const commonConfig = require('./webpack.common.js');

/**
 * Webpack Plugins
 */
const SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin');
const PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const {BugsnagSourceMapUploaderPlugin} = require('webpack-bugsnag-plugins');

function getUglifyOptions(supportES2015) {
  const uglifyCompressOptions = {
    pure_getters: true, /* buildOptimizer */
    // PURE comments work best with 3 passes.
    // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
    passes: 3         /* buildOptimizer */
  };

  return {
    ecma: supportES2015 ? 6 : 5,
    warnings: false,    // TODO verbose based on option?
    ie8: false,
    mangle: true,
    compress: uglifyCompressOptions,
    output: {
      ascii_only: true,
      comments: false
    }
  };
}

module.exports = function (env) {
  const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
  const supportES2015 = buildUtils.supportES2015(buildUtils.DEFAULT_METADATA.tsConfigPath);
  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
    host: process.env.HOST || 'localhost',
    port: process.env.PORT || 8080,
    ENV: ENV,
    HMR: false
  });

  // set environment suffix so these environments are loaded.
  //METADATA.envFileSuffix = METADATA.E2E ? 'e2e.prod' : 'prod';
  METADATA.envFileSuffix = METADATA.envFileSuffix || 'pre';

  return webpackMerge(commonConfig({env: ENV, metadata: METADATA}), {

    /**
     * Options affecting the output of the compilation.
     *
     * See: http://webpack.github.io/docs/configuration.html#output
     */
    output: {

      /**
       * The output directory as absolute path (required).
       *
       * See: http://webpack.github.io/docs/configuration.html#output-path
       */
      path: helpers.root('dist'),
      /**
       * Specifies the name of each output file on disk.
       * IMPORTANT: You must not specify an absolute path here!
       *
       * See: http://webpack.github.io/docs/configuration.html#output-filename
       */
      filename: '[name].[chunkhash].bundle.js',

      /**
       * The filename of the SourceMaps for the JavaScript files.
       * They are inside the output.path directory.
       *
       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
       */
      sourceMapFilename: '[file].map',

      /**
       * The filename of non-entry chunks as relative path
       * inside the output.path directory.
       *
       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
       */
      chunkFilename: '[name].[chunkhash].chunk.js'
    },

    module: {

      rules: [
        /**
         * Extract CSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
          include: [helpers.root('src', 'styles')]
        },

        /**
         * Extract and compile SCSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.scss$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
          include: [helpers.root('src', 'styles')]
        }
      ]
    },

    /**
     * Add additional plugins to the compiler.
     *
     * See: http://webpack.github.io/docs/configuration.html#plugins
     */
    plugins: [

      new SourceMapDevToolPlugin({
        filename: '[file].map[query]',
        moduleFilenameTemplate: '[resource-path]',
        fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
        sourceRoot: 'webpack:///'
      }),
      new MiniCssExtractPlugin({ filename: '[name]-[hash].css', chunkFilename: '[name]-[chunkhash].css' }),
      new PurifyPlugin(), /* buildOptimizer */
      new HashedModuleIdsPlugin(),
      /**
       * Plugin: UglifyJsPlugin
       * Description: Minimize all JavaScript output of chunks.
       * Loaders are switched into minimizing mode.
       *
       * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
       *
       * NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
       */
      new UglifyJsPlugin({
        sourceMap: false,
        parallel: true,
        uglifyOptions: getUglifyOptions(supportES2015)
      }),
      new BugsnagSourceMapUploaderPlugin({
        apiKey: METADATA.bugsnagKey,
        publicPath: 'dist'
      })

    ],

    /**
     * Include polyfills or mocks for various node stuff
     * Description: Node configuration
     *
     * See: https://webpack.github.io/docs/configuration.html#node
     */
    node: {
      global: true,
      crypto: 'empty',
      process: false,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }
  });
};

Попробуйте построить без исходных карт, на angular cli это делается с помощью --source-map = false

Carlos E 09.11.2018 14:49

Наконец, по прошествии долгих дней я обнаружил, что ошибка была вызвана ошибкой, так как файл существовал, это не проблема веб-пакета или сборки. Исправлена ​​активация опции overwrite: true в BugsnagSourceMapUploaderPlugin или удаление sourMap. Я не понимаю, как сборка не компилируется для такой ошибки.

xavier cet 13.11.2018 14:12
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
225
1

Ответы 1

Да, Ксавьер прав. Я была такая же проблема. Он находился в файле webpack.prod.js. По умолчанию перезапись отключена. Я искал в проекте appVersion.

new BugsnagSourceMapUploaderPlugin({
  apiKey: 'YOUR_API_KEY',
  appVersion: '4.0.0.038',
  overwrite: true
})

Подробности можно найти здесь на странице BugSnag GitHub.

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