1

Решил первый раз настроить Webpack самостоятельно.

Реакт стоит версии 18.2, но почему-то компоненты не хотят отрисовываться без импорта в них React

webpack.config.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

let mode = "development";
let target = 'web'

if (process.env.NODE_ENV === "production") {
    mode = "production"
    target = 'browserslist'
}

const plugins = [
    new HtmlWebpackPlugin({
         template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css', // Формат имени файла
    }),
]


module.exports = {
    mode,
    plugins,
    target,
    entry: "./src/index.jsx",
    output: {
        path: path.resolve(__dirname, "./dist"),
        clean: true,
    },
    devtool: "inline-source-map",
    devServer: {
        hot: true,
        open: true,
    },
    module: {
         rules: [
            {test: /\.html$/, use: ["html-loader"]},
            {
                test: /\.(s[ac]|c)ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
                type: mode === 'production' ? 'asset' : 'asset/resource', // В продакшен режиме
                // изображения размером до 8кб будут инлайнится в код
                // В режиме разработки все изображения будут помещаться в dist/assets
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // не обрабатываем файлы из node_modules
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true, // Использование кэша для избежания рекомпиляции
                        // при каждом запуске
                    },
                },
            },
            {
                test: /\.jsx?$/, // определяем тип файлов
                exclude: /(node_modules)/,  // исключаем из обработки папку node_modules
                loader: "babel-loader",   // определяем загрузчик
                options: {
                    cacheDirectory: true,
               }
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },

} babel.config.json

{
  "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
  ]
}
5
  • React нужно импортировать в компоненты, в противном случае webpack не будет понимать синтаксис jsx
    – T0xee.n17
    Commented 5 февр. 2023 в 11:55
  • 1
    Но ведь с реакт 17 версии можно не импортить. И например когда проект собираешь с Create React App там тоже не нужно импортить React from react Commented 5 февр. 2023 в 11:56
  • Действительно.. А что вы подразумеваете под "не хотят отрисовываться"? Ошибка вылезает какая-нибудь?
    – T0xee.n17
    Commented 5 февр. 2023 в 12:04
  • @AlexanderKomarchev вот это добавьте в конфиг babel-а. ["@babel/preset-react", {"runtime": "automatic"}]
    – Randall
    Commented 5 февр. 2023 в 14:12
  • @T0xee.n17 в исходном коде страницы нет никаких тэгов,только корневой root Commented 5 февр. 2023 в 17:15

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.