Решил первый раз настроить 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"
]
}
["@babel/preset-react", {"runtime": "automatic"}]