Pull request #730: + client: Add Hot Module Replacement

Merge in DNS/adguard-home from feature/hmr to master

Squashed commit of the following:

commit 952ed1955c2a7a32446d99489f137f02eb47c99e
Merge: 83484931 de92c852
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Aug 13 11:02:10 2020 +0300

    Merge branch 'master' into feature/hmr

commit 8348493105d7d63d8b0836a5c272df2b17a6b142
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 15:07:31 2020 +0300

    Remove empty prop types, remove Services empty container

commit b2fe4a30b79d91e482318ee5deea8e49c7038f7e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 13:56:35 2020 +0300

    Move constants

commit f8be4c18c35193ad77bf5e25f311ad834c1d6870
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 13:19:02 2020 +0300

    Fix Setup bug, update webpack.dev

commit 1d9cc4ddf8af2c979eb707a7f0fc06744eec186c
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 12:10:38 2020 +0300

    Review changes

commit a1edb21358def21ed1808b081ffc2f0b6755e3da
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 11:46:58 2020 +0300

    Remove lazy loading, fix updated components

commit 0aa2cf55f8d4206ac9e2f99fc1b990ed8a9c7825
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Aug 4 20:32:19 2020 +0300

    Refactor App component, add lazy loading

commit 3c2ba4772a91ff7b06641dba6c6bf3fdcd2fdf7f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Aug 4 17:12:41 2020 +0300

    Simplify App hot loading boilerplate, setup lazy loading, update Header

commit 8df3221f315372b066f2ac0c9a1687f1677b8415
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Aug 4 15:16:06 2020 +0300

    + client: Add Hot Module Replacement
This commit is contained in:
Artem Baskal
2020-08-13 11:15:45 +03:00
parent de92c85256
commit 97df19898f
38 changed files with 1098 additions and 822 deletions

View File

@@ -5,6 +5,7 @@ const flexBugsFixes = require('postcss-flexbugs-fixes');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BUILD_ENVS } = require('./constants');
const RESOURCES_PATH = path.resolve(__dirname);
const ENTRY_REACT = path.resolve(RESOURCES_PATH, 'src/index.js');
@@ -18,13 +19,10 @@ const ASSETS_PATH = path.resolve(RESOURCES_PATH, 'public/assets');
const PUBLIC_PATH = path.resolve(__dirname, '../build/static');
const PUBLIC_ASSETS_PATH = path.resolve(PUBLIC_PATH, 'assets');
const BUILD_ENVS = {
dev: 'development',
prod: 'production',
};
const BUILD_ENV = BUILD_ENVS[process.env.BUILD_ENV];
const isDev = BUILD_ENV === BUILD_ENVS.dev;
const config = {
mode: BUILD_ENV,
target: 'web',
@@ -36,22 +34,35 @@ const config = {
},
output: {
path: PUBLIC_PATH,
filename: '[name].[chunkhash].js',
filename: '[name].[hash].js',
},
resolve: {
modules: ['node_modules'],
alias: {
MainRoot: path.resolve(__dirname, '../'),
ClientRoot: path.resolve(__dirname, './src'),
// TODO: change to '@hot-loader/react-dom' when v16.13.1 is released
// https://stackoverflow.com/a/62671689/12942752
'react-dom': 'react-dom',
},
},
module: {
rules: [
{
test: /\.ya?ml$/,
type: 'json',
use: 'yaml-loader',
},
{
test: /\.css$/i,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
},
},
{
loader: 'css-loader',
options: {
@@ -122,7 +133,8 @@ const config = {
template: HTML_LOGIN_PATH,
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
filename: isDev ? '[name].css' : '[name].[hash].css',
chunkFilename: isDev ? '[id].css' : '[id].[hash].css',
}),
new CopyPlugin({
patterns: [