diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b5956e53..69f4c0df 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1719,6 +1719,12 @@ "integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==", "dev": true }, + "@prefresh/babel-plugin": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@prefresh/babel-plugin/-/babel-plugin-0.4.0.tgz", + "integrity": "sha512-fFwyfIHm/B8BBY7HL4j9iJl7KFk/5yVIWE+aozRRPPxI8lRFkyXMAgUFtTSmP3/jiMA6jyOcBeYUhWsyEUynpQ==", + "dev": true + }, "@prefresh/core": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@prefresh/core/-/core-1.3.0.tgz", @@ -7288,7 +7294,7 @@ }, "ignore-walk": { "version": "3.0.3", - "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz", + "resolved": false, "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==", "dev": true, "requires": { diff --git a/frontend/package.json b/frontend/package.json index 6353eb63..601f74a3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -46,6 +46,7 @@ "@babel/preset-react": "^7.12.10", "@formatjs/cli": "^3.0.1", "@mavrin/stylelint-declaration-use-css-custom-properties": "1.0.0-alpha.2", + "@prefresh/babel-plugin": "^0.4.0", "@prefresh/webpack": "^3.0.0", "@size-limit/file": "^4.9.1", "@types/classnames": "^2.2.11", diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index bcc48529..eff7b852 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -12,7 +12,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const babelConfig = require('./.babelrc.js'); const NODE_ID = 'remark42'; -const PUBLIC_PATH = '/web'; +const PUBLIC_PATH = '/web/'; const PORT = process.env.PORT || 9000; const REMARK_API_BASE_URL = process.env.REMARK_API_BASE_URL || 'http://127.0.0.1:8080'; const DEVSERVER_BASE_PATH = process.env.DEVSERVER_BASE_PATH || 'http://127.0.0.1:9000'; @@ -78,15 +78,7 @@ module.exports = (_, { mode, analyze }) => { publicPath: PUBLIC_PATH, }; - const optimization = { - chunkIds: 'named', - moduleIds: 'named', - splitChunks: { - minChunks: 3, - }, - }; - - const getTsRule = (babelEnvConfig = {}) => { + const getTsRule = (babelConfig = {}) => { return { test: /\.tsx?$/, exclude: /node_modules/, @@ -96,7 +88,7 @@ module.exports = (_, { mode, analyze }) => { options: { exclude, cacheDirectory: true, - ...babelEnvConfig, + ...babelConfig, }, }, { @@ -178,13 +170,7 @@ module.exports = (_, { mode, analyze }) => { port: PORT, contentBase: PUBLIC_FOLDER_PATH, disableHostCheck: true, - historyApiFallback: true, - quiet: true, - inline: true, hot: true, - compress: true, - clientLogLevel: 'none', - overlay: false, stats: 'minimal', watchOptions: { ignored: [PUBLIC_FOLDER_PATH, path.resolve(__dirname, 'node_modules')], @@ -196,7 +182,7 @@ module.exports = (_, { mode, analyze }) => { }; const plugins = [ - ...(isDev ? [new CleanWebpackPlugin(), new RefreshPlugin(), new webpack.HotModuleReplacementPlugin()] : []), + ...(isDev ? [new CleanWebpackPlugin(), new webpack.HotModuleReplacementPlugin(), new RefreshPlugin()] : []), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(mode), 'process.env.REMARK_NODE': JSON.stringify(NODE_ID), @@ -211,7 +197,6 @@ module.exports = (_, { mode, analyze }) => { entry, devtool: 'source-map', resolve, - optimization, }; const legacyConfig = { @@ -246,7 +231,13 @@ module.exports = (_, { mode, analyze }) => { chunkFilename: '[name].mjs', }, module: { - rules: [getTsRule(babelConfig.env.modern), ...rules], + rules: [ + getTsRule({ + ...babelConfig.env.modern, + plugins: [...babelConfig.env.modern.plugins, ...(isDev ? ['@prefresh/babel-plugin'] : [])], + }), + ...rules, + ], }, plugins: [ ...plugins, @@ -272,14 +263,6 @@ module.exports = (_, { mode, analyze }) => { REMARK_URL, minify: htmlMinifyOptions, }), - // new HtmlWebpackPlugin({ - // template: path.resolve(__dirname, 'templates/comments.ejs'), - // filename: 'comments.html', - // inject: false, - // env: mode, - // REMARK_URL, - // minify: htmlMinifyOptions, - // }), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'templates/last-comments.ejs'), filename: 'last-comments.html', @@ -320,7 +303,12 @@ module.exports = (_, { mode, analyze }) => { devServer, }; + if (isDev) { + return modernConfig; + } + return [legacyConfig, modernConfig]; }; + module.exports.CUSTOM_PROPERTIES_PATH = CUSTOM_PROPERTIES_PATH; module.exports.exclude = exclude;