Блог

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

ОШИБКА в конфликте: несколько ресурсов отправляют разное содержимое в одно и то же имя файла assets/css/chunk.src_pages_order_MyOrdersPage_index_ts.css

Моя конфигурация webpack:

 module: {
  rules: [
    {
      test: /.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/',
    },
    {
      test: /.vue$/,
      loader: 'vue-loader',
      options: {
        loader: {
          scss: 'vue-style-loader!css-loader!sass-loader'
        }
      }
    },
    {
      test: /.ts$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: { babelrc: true }
        },
        {
          loader: 'ts-loader',
          options: { appendTsSuffixTo: [/.vue$/] }
        }
      ]
    },
    {
      test: /.(png|jpg|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]'
      }
    },
    {
      test: /.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: { sourceMap: true },
        },
        {
          loader: 'postcss-loader',
          options: { sourceMap: true },
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
          },
        },
        {
          loader: 'sass-resources-loader',
          options: {
            sourceMap: true,
            resources: [
              resolve('../src/assets/scss/modules/_globals.scss'),
            ]
          }
        }
      ],
    },
    {
      test: /.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: { sourceMap: true },
        },
        {
          loader: 'postcss-loader',
          options: { sourceMap: true },
        },
      ],
    },
    {
      enforce: 'pre',
      test: /.ts$/,
      loader: 'tslint-loader',
      exclude: /node_modules/
    }
  ],
},
resolve: {
  extensions: ['.ts', '.js', '.vue', '.json'],
  alias: {
    '@': PATH.src,
    '/': PATH.public,
    'ActionTypes': resolve('../src/store/action-types.ts'),
    vue: env.prod ? 'vue/dist/vue.runtime.esm-browser.prod.js' : 'vue/dist/vue.runtime.esm-browser.js'
  }
},

plugins: [
  new MiniCssExtractPlugin({
    filename: `${ PATH.assets }css/[name].[hash].css`,
    chunkFilename: `${ PATH.assets }css/chunk.[name].css`,
  }),

  new HtmlWebpackPlugin({
    title: 'RouteMe',
    hash: false,
    template: `${ PATH.public }/index.html`,
    filename: 'index.html',
    inject: true,
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true
  }),

  new CleanWebpackPlugin(),

  new BundleAnalyzerPlugin({
    analyzerMode: 'server',
    openAnalyzer: false
  }),

  new CopyWebpackPlugin([
    {
      from: `${ PATH.src }/assets/img/`,
      to: `${ PATH.assets }/img/`
    }
  ]),

  new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: false,
    __VUE_PROD_DEVTOOLS__: false,
  }),

  new webpack.EnvironmentPlugin([
    'MAP_TOKEN',
    'MAP_MARKER',
    'API_TOKEN',
    'API_SECRET'
  ]),

  new webpack.ProvidePlugin({
    useRouter: ['vue-router', 'useRouter'],
    useStore: ['vuex', 'useStore'],
    action: resolve('../src/store/action-types.ts'),
    mutation: [resolve('../src/store/mutation-types.ts')],
    store: resolve('../src/store/namespaces.ts')
  }),

  new VueLoaderPlugin()
],
 

}

Я буду благодарен за вашу помощь