Блог

Главная - Вопросы по программированию - Сервер Webpack заменяет все содержимое файла index.html

Сервер Webpack заменяет все содержимое файла index.html

#javascript #reactjs #webpack

Вопрос:

Я наткнулся на странное поведение при использовании Webpack 5. Когда я строю для производства, все работает так, как ожидалось. Но когда я пытаюсь запустить сервер разработки, все мои ресурсы и файлы .js заменяются содержимым index.html . Поэтому я получаю сообщение об ошибке unexpected token "<" , когда браузер пытается проанализировать файл .js. Другими словами, все файлы находятся на своем месте, но они не содержат ничего, кроме HTML-разметки. Вот моя конфигурация вывода:

 output: {
      path: path.resolve(__dirname, 'build'),
      pathinfo: !isProd,
      filename: isProd ? 'static/js/[name].[contenthash:8].js' : 'static/js/bundle.js',
      chunkFilename: isProd ? 'static/js/[name].[contenthash:8].chunk.js' : 'static/js/[name].chunk.js',
      assetModuleFilename: 'static/media/[name].[hash][ext]',
      publicPath: process.env.PUBLIC_URL || './',
    },

Разрешить:

 resolve: {
      modules: ['node_modules'],
      extensions: ['.js', '.ts', '.tsx', '.json', '.jsx'],
      alias: {
        src: path.resolve(__dirname, 'src'),
      },
    },

И часть плагинов:

 plugins: [
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: path.resolve(__dirname, './public/index.html'),
          },
          isProd
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined,
        ),
      ),
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].[contenthash:8].css',
        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
      }),
      new webpack.DefinePlugin({
        REACT_APP_API: `"${process.env.REACT_APP_API}"`,
        REACT_APP_BASENAME: `"${process.env.REACT_APP_BASENAME}"`,
        PUBLIC_URL: `"${process.env.PUBLIC_URL || '.'}"`,
      }),
      // new BundleAnalyzerPlugin(),
    ],

Я даже понятия не имею, с чего начать. Был бы признателен, если бы кто-нибудь мог мне в этом помочь.

Метки: