Tengo una gran aplicación de reacción con material ui y muchos componentes. Tiene 2 archivos de configuración del paquete web. Uno se llama webpack.base.config.js y el otro es webpack.prod.config.js. Mi script en package.json cuando ejecuto npm start es webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback --env.PLATFORM=local --env.VERSION=stag
Para ser exactos, mi Core i5 de 11.ª generación tarda 36 segundos en recargar en caliente solo con el código eslint comentado. ¿También existe la posibilidad de eliminar el paquete web y usar scripts de reacción normales? el archivo completo es este
const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const Dotenv = require('dotenv-webpack'); module.exports = env => { const { PLATFORM } = env; return merge([ { entry: ['@babel/polyfill', path.resolve(__dirname, '../src')], module: { rules: [ { test: /\.(js|jsx)$/, exclude: [/node_modules/, /test\.(js|jsx)$/], use: { loader: 'babel-loader', }, }, { test: /\.(woff(2)?|ttf|eot|otf|jpe?g|png|gif|svg)$/i, loader: 'file-loader', options: { outputPath: 'images', name: '[name].[ext]', }, }, // { // enforce: 'pre', // test: /\.(js|jsx|mjs)$/, // exclude: /node_modules/, // use: [ // { // loader: require.resolve('eslint-loader'), // options: { // eslintPath: require.resolve('eslint'), // emitWarning: true, // }, // }, // ], // }, { test: /\.(scss|css)$/, use: [ PLATFORM === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader', ], }, ], }, plugins: [ new Dotenv({ path: './.env', systemvars: true, }), new HtmlWebpackPlugin({ template: './src/index.html', fileName: './index.html', hash: true, }), new webpack.DefinePlugin({ 'process.env.VERSION': JSON.stringify(env.VERSION), 'process.env.PLATFORM': JSON.stringify(env.PLATFORM), }), new CopyWebpackPlugin([{ from: './src/assets/favicon.png' }]), ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '..', 'dist'), publicPath: '/', }, }, ]); };