From 0ca5c01c9a4cc18e11c96f943ef6b4a421103bfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?O=C4=9Fuzhan=20Aslan?= Date: Sat, 10 Apr 2021 21:24:03 +0300 Subject: [PATCH 1/3] feat: esbuild loader integration --- package.json | 5 ++- webpack.client.config.js | 83 +++++++++++++++++++--------------------- webpack.server.config.js | 27 +++++-------- 3 files changed, 52 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index 7f04948..f1fec36 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "autoprefixer": "9.3.1", "axios": "0.19.0", "babel-eslint": "10.0.1", - "babel-loader": "8.0.6", + "@babel/eslint-parser": "^7.12.1", "classnames": "2.2.6", "clean-webpack-plugin": "1.0.0", "cli-color": "^2.0.0", @@ -47,6 +47,7 @@ "css-loader": "1.0.1", "eev": "0.1.5", "eslint": "6.1.0", + "esbuild-loader": "^2.11.0", "eslint-config-airbnb": "18.0.1", "eslint-config-prettier": "6.3.0", "eslint-plugin-import": "^2.19.1", @@ -92,7 +93,7 @@ "svg-url-loader": "2.3.2", "terser-webpack-plugin": "2.3.5", "url-loader": "1.0.1", - "webpack": "4.25.1", + "webpack": "4.46.0", "webpack-bundle-analyzer": "3.6.0", "webpack-cli": "3.1.0", "webpack-dev-middleware": "3.4.0", diff --git a/webpack.client.config.js b/webpack.client.config.js index 50325d1..9074fd8 100644 --- a/webpack.client.config.js +++ b/webpack.client.config.js @@ -9,11 +9,13 @@ const CopyWebpackPlugin = require('copy-webpack-plugin'); const TerserWebpackPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); -const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); +const { ESBuildMinifyPlugin } = require('esbuild-loader'); +const voltranCommon = require('@voltran/common'); require('intersection-observer'); -const {createComponentName} = require('./src/universal/utils/helper.js'); +const { createComponentName } = require('./src/universal/utils/helper.js'); const packageJson = require('./package.json'); @@ -27,11 +29,6 @@ const appConfig = require(appConfigFilePath); const commonConfig = require('./webpack.common.config'); const postCssConfig = require('./postcss.config'); const babelConfig = require('./babel.server.config'); - -const voltranClientConfigPath = voltranConfig.webpackConfiguration.client; -const voltranClientConfig = voltranClientConfigPath ? - require(voltranConfig.webpackConfiguration.client) : - ''; const normalizeUrl = require('./lib/os.js'); const replaceString = require('./config/string.js'); @@ -94,7 +91,7 @@ if (isDebug) { const outputPath = voltranConfig.output.client.path; -const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { +const clientConfig = webpackMerge(commonConfig, voltranConfig.webpackConfiguration.client, { name: 'client', target: 'web', @@ -115,21 +112,18 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { rules: [ { test: reScript, + loader: 'esbuild-loader', include: [path.resolve(__dirname, 'src'), voltranConfig.inputFolder], - loader: 'babel-loader', options: { - cacheDirectory: isDebug, - babelrc: false, - ...babelConfig() + loader: 'jsx', + target: 'es2015' } }, { test: /\.js$/, loader: 'string-replace-loader', options: { - multiple: [ - ...replaceString() - ] + multiple: [...replaceString()] } }, { @@ -137,13 +131,13 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { use: [ isDebug ? { - loader: 'style-loader', - options: { - insertAt: 'top', - singleton: true, - sourceMap: false + loader: 'style-loader', + options: { + insertAt: 'top', + singleton: true, + sourceMap: false + } } - } : MiniCssExtractPlugin.loader, { loader: 'css-loader', @@ -165,13 +159,13 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { use: [ isDebug ? { - loader: 'style-loader', - options: { - insertAt: 'top', - singleton: true, - sourceMap: false + loader: 'style-loader', + options: { + insertAt: 'top', + singleton: true, + sourceMap: false + } } - } : MiniCssExtractPlugin.loader, { loader: 'css-loader', @@ -199,6 +193,10 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { optimization: { minimizer: [ + new ESBuildMinifyPlugin({ + target: 'es2015', + css: true + }), new TerserWebpackPlugin({ sourceMap: isDebug, parallel: true, @@ -212,10 +210,15 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { ...(isBuildingForCDN ? [] : [ - new CleanWebpackPlugin([distFolderPath], { - verbose: true - }) - ]), + new CleanWebpackPlugin([distFolderPath], { + verbose: true + }) + ]), + + new webpack.DllReferencePlugin({ + context: process.cwd(), + manifest: voltranCommon + }), new webpack.DefinePlugin({ 'process.env.BROWSER': true, @@ -233,11 +236,11 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { ...(isDebug ? [new webpack.HotModuleReplacementPlugin()] : [ - new MiniCssExtractPlugin({ - filename: '[name].css', - chunkFilename: '[id]-[contenthash].css' - }) - ]), + new MiniCssExtractPlugin({ + filename: '[name].css', + chunkFilename: '[id]-[contenthash].css' + }) + ]), new AssetsPlugin({ path: voltranConfig.inputFolder, @@ -245,13 +248,7 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { prettyPrint: true }), - ...( - isAnalyze ? - [ - new BundleAnalyzerPlugin() - ] : - [] - ), + ...(isAnalyze ? [new BundleAnalyzerPlugin()] : []) ] }); diff --git a/webpack.server.config.js b/webpack.server.config.js index 5c109cf..c093f57 100644 --- a/webpack.server.config.js +++ b/webpack.server.config.js @@ -6,29 +6,23 @@ const nodeExternals = require('webpack-node-externals'); const env = process.env.VOLTRAN_ENV || 'local'; const voltranConfig = require('./voltran.config'); -const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`; -const appConfig = require(appConfigFilePath); +const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`; +const appConfig = require(appConfigFilePath); // eslint-disable-line import/no-dynamic-require +g; const commonConfig = require('./webpack.common.config'); -const babelConfig = require('./babel.server.config'); const postCssConfig = require('./postcss.config'); -const normalizeUrl = require('./lib/os.js'); const replaceString = require('./config/string.js'); -const voltranServerConfigPath = voltranConfig.webpackConfiguration.server; -const voltranServerConfig = voltranServerConfigPath ? - require(voltranConfig.webpackConfiguration.server) : - ''; - const isDebug = voltranConfig.dev; let styles = ''; -for(var i = 0; i < voltranConfig.styles.length; i++) { +for (let i = 0; i < voltranConfig.styles.length; i++) { styles += `require('${voltranConfig.styles[i]}');`; } -const serverConfig = webpackMerge(commonConfig,voltranServerConfig, { +const serverConfig = webpackMerge(commonConfig, voltranConfig.webpackConfiguration.server, { name: 'server', target: 'node', @@ -49,21 +43,18 @@ const serverConfig = webpackMerge(commonConfig,voltranServerConfig, { rules: [ { test: /\.(js|jsx|mjs)$/, - loader: 'babel-loader', + loader: 'esbuild-loader', include: [path.resolve(__dirname, 'src'), voltranConfig.inputFolder], options: { - cacheDirectory: true, - babelrc: false, - ...babelConfig() + loader: 'jsx', + target: 'es2015' } }, { test: /\.js$/, loader: 'string-replace-loader', options: { - multiple: [ - ...replaceString() - ] + multiple: [...replaceString()] } }, { From d7bdb800f378d1aa24d91262ca8add0305b0217d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?O=C4=9Fuzhan=20Aslan?= Date: Wed, 21 Apr 2021 11:28:14 +0300 Subject: [PATCH 2/3] fix: unintelligible code deleted --- webpack.server.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.server.config.js b/webpack.server.config.js index c093f57..de1de14 100644 --- a/webpack.server.config.js +++ b/webpack.server.config.js @@ -9,7 +9,7 @@ const voltranConfig = require('./voltran.config'); const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`; const appConfig = require(appConfigFilePath); // eslint-disable-line import/no-dynamic-require -g; + const commonConfig = require('./webpack.common.config'); const postCssConfig = require('./postcss.config'); const replaceString = require('./config/string.js'); From b7d3893f4cdf5281ed443f49a61ab5eb378fa8ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?O=C4=9Fuzhan=20Aslan?= Date: Wed, 21 Apr 2021 11:39:48 +0300 Subject: [PATCH 3/3] fix: conflict resolved --- package.json | 2 +- webpack.client.config.js | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index ebe3163..f789235 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "voltranjs", - "version": "1.0.4", + "version": "1.0.5", "main": "src/index.js", "author": "Hepsiburada Technology Team", "bin": { diff --git a/webpack.client.config.js b/webpack.client.config.js index 9074fd8..3bc19f5 100644 --- a/webpack.client.config.js +++ b/webpack.client.config.js @@ -11,7 +11,6 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const { ESBuildMinifyPlugin } = require('esbuild-loader'); -const voltranCommon = require('@voltran/common'); require('intersection-observer'); @@ -30,6 +29,11 @@ const commonConfig = require('./webpack.common.config'); const postCssConfig = require('./postcss.config'); const babelConfig = require('./babel.server.config'); +const voltranClientConfigPath = voltranConfig.webpackConfiguration.client; +const voltranClientConfig = voltranClientConfigPath + ? require(voltranConfig.webpackConfiguration.client) + : ''; + const normalizeUrl = require('./lib/os.js'); const replaceString = require('./config/string.js'); @@ -91,7 +95,7 @@ if (isDebug) { const outputPath = voltranConfig.output.client.path; -const clientConfig = webpackMerge(commonConfig, voltranConfig.webpackConfiguration.client, { +const clientConfig = webpackMerge(commonConfig, voltranClientConfig, { name: 'client', target: 'web', @@ -215,11 +219,6 @@ const clientConfig = webpackMerge(commonConfig, voltranConfig.webpackConfigurati }) ]), - new webpack.DllReferencePlugin({ - context: process.cwd(), - manifest: voltranCommon - }), - new webpack.DefinePlugin({ 'process.env.BROWSER': true, __DEV__: isDebug,