#reactjs #webpack
Вопрос:
Я не придумал эту конфигурацию, поискал в Интернете, но не смог найти ничего полезного. Моя проблема в том, что каждое изменение обновляет всю страницу, например, F5, вместо горячей перезагрузки. Я пытался:
- добавление
inlineиhotкdevServer - добавление
--inlineи--hotвwebpack-dev-serverкоманду - установите базу содержимого в
webpack-dev-serverкоманде
Ничего не сработало. Каждый раз, когда я вношу изменения, мне приходится ждать 10 секунд, пока вся страница не обновится. Пожалуйста, помогите. Вот конфигурация
webpack.common.js
const DotEnvWebpack = require('dotenv-webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const PreloadWebpackPlugin = require('preload-webpack-plugin'); const LodashWebpackPlugin = require('lodash-webpack-plugin'); const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const appPath = require('./app-path.config'); // // ────────────────────────────────────────────────────── I ────────── // :::::: P L U G I N S : : : : : : : : // ──────────────────────────────────────────────────────────────── // const loadEnv = new DotEnvWebpack(); const reduceLodash = new LodashWebpackPlugin(); const reduceMomentLocales = new MomentLocalesPlugin(); const extractCss = new MiniCssExtractPlugin({ filename: '[name].[hash:8].css', ignoreOrder: true, }); const buildIndexHtml = new HtmlWebpackPlugin({ template: appPath.template, }); const preloadWebpackPlugin = new PreloadWebpackPlugin({ rel: 'preload', include: [ 'profile', ], }); const copyAssets = new CopyWebpackPlugin({ patterns: [ { from: 'src/assets', to: 'src/assets', }, { from: 'manifest.webmanifest', to: 'manifest.webmanifest', }, ], }); // // ──────────────────────────────────────────────────────────────── I ────────── // :::::: M O D U L E R U L E S : : : : : : : : // ────────────────────────────────────────────────────────────────────────── // const processJs = { test: /.js$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'], }; const processLessInSrc = { test: /.less$/, include: appPath.sourceDir, use: [ { loader: MiniCssExtractPlugin.loader, options: { hmr: process.env.NODE_ENV !== 'production', }, }, { loader: 'css-loader', options: { localsConvention: 'camelCase', modules: { localIdentName: '[local]_[hash:base64:6]', }, }, }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'autoprefixer', ], ], }, }, }, { loader: 'less-loader', }, { loader: 'style-resources-loader', options: { patterns: appPath.stylesResource, }, }, ], }; const processLessInAntDesign = { test: /.less$/, include: /antd.*.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'less-loader', options: { lessOptions: { modifyVars: { 'primary-color': '#202020', 'border-radius-base': '6px', }, javascriptEnabled: true, }, }, }, ], }; const processCssInLibs = { test: /.css$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, ], }; const processSvg = { test: /.svg$/, use: [ 'babel-loader', 'react-svg-loader', ], }; // // ────────────────────────────────────────────────────────────────── I ────────── // :::::: C O N F I G U R A T I O N : : : : : : : : // ──────────────────────────────────────────────────────────────────────────── // module.exports = { entry: appPath.render, output: { path: appPath.publicDir, filename: '[name].[hash:8].js', chunkFilename: '[name].[hash:8].js', }, module: { rules: [ processJs, processLessInSrc, processLessInAntDesign, processCssInLibs, processSvg, ], }, node: { fs: 'empty', }, optimization: { usedExports: true, splitChunks: { cacheGroups: { react: { name: 'react', test: /[\/]node_modules[\/]((react|react-dom).*)[\/]/, chunks: 'all', }, antd: { name: 'antd', test: /[\/]node_modules[\/]((antd|@ant-design).*)[\/]/, chunks: 'all', }, firebase: { name: 'firebase', test: /[\/]node_modules[\/]((@firebase).*)[\/]/, chunks: 'all', }, heavy_libs: { name: 'heavy_libs', test: /[\/]node_modules[\/]((@sentry|moment|html2canvas|react-qr-reader).*)[\/]/, chunks: 'all', }, rest_libs: { name: 'rest_libs', minChunks: 2, test: /[\/]node_modules[\/]((?!react|react-dom|antd|@ant-design|@firebase|@sentry|moment|html2canvas|react-qr-reader).*)[\/]/, chunks: 'all', }, }, }, }, plugins: [ loadEnv, reduceLodash, reduceMomentLocales, extractCss, buildIndexHtml, preloadWebpackPlugin, copyAssets, ], }; webpack.dev.js
const DotEnvWebpack = require('dotenv-webpack'); const WebpackMerge = require('webpack-merge'); const common = require('./webpack.common'); const loadEnv = new DotEnvWebpack({ path: './.env.dev', }); module.exports = WebpackMerge(common, { devtool: 'inline-source-map', mode: 'development', devServer: { port: 3000, open: true, historyApiFallback: { disableDotRule: true, }, }, plugins: [ loadEnv, ], }); пакет.json
"start": "webpack-dev-server --config config/webpack.dev.js", ... "webpack-dev-server": "^3.11.0",