fixed webpack

.gitignore

@@ -8,6 +8,9 @@
 # testing
 /coverage
 
+# production
+/dist
+
 # misc
 .DS_Store
 .env.local

package.json

@@ -51,7 +51,11 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-root-import": "^6.4.1",
+    "babel-polyfill": "^6.26.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "compression-webpack-plugin": "^7.1.2",
     "css-loader": "^3.4.2",
+    "css-minimizer-webpack-plugin": "^1.3.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.10.0",
@@ -71,6 +75,7 @@
     "less-loader": "^5.0.0",
     "lint-staged": "^10.0.8",
     "lodash": "^4.17.20",
+    "mini-css-extract-plugin": "^1.3.9",
     "node-sass": "^4.14.1",
     "prettier": "^1.19.1",
     "prop-types": "^15.7.2",
@@ -82,9 +87,12 @@
     "react-test-renderer": "^16.13.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
-    "webpack": "^4.42.0",
+    "terser-webpack-plugin": "^5.1.1",
-    "webpack-cli": "^3.3.11",
+    "webpack": "^5.28.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
   },
   "husky": {
     "hooks": {

webpack.config.js

@@ -1,98 +1,12 @@
-const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack/webpack.common');
 
-module.exports = {
+const envs = {
-  mode: process.env.NODE_ENV,
+  development: 'dev',
-  entry: './src/index.js',
+  production: 'prod',
-  output: {
-    path: path.join(__dirname, 'dist'),
-    publicPath: '/dist/',
-    filename: 'index.js',
-    library: 'wlan-cloud-ui-library',
-    libraryTarget: 'umd',
-    umdNamedDefine: true,
-  },
-  externals: [
-    {
-      react: {
-        amd: 'react',
-        commonjs: 'react',
-        commonjs2: 'react',
-        root: 'React',
-      },
-    },
-    'react-dom',
-    'antd',
-    '@ant-design/icons',
-    'prop-types',
-    'react-router-dom',
-  ],
-  devtool: 'inline-source-map',
-  devServer: {
-    port: 3000,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader', 'eslint-loader'],
-      },
-      {
-        // Preprocess 3rd party .css files located in node_modules
-        test: /\.css$/,
-        include: /node_modules/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              javascriptEnabled: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(css|scss)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-              },
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    modules: [path.resolve('./node_modules'), path.resolve('./src')],
-    alias: {
-      src: path.resolve(__dirname, './src'),
-      react: path.resolve(__dirname, './node_modules/react'),
-      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
-      antd: path.resolve(__dirname, './node_modules/antd'),
-      '@ant-design/icons': path.resolve(__dirname, './node_modules/@ant-design/icons'),
-      'prop-types': path.resolve(__dirname, './node_modules/prop-types'),
-      'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom'),
-    },
-  },
 };
+
+/* eslint-disable global-require,import/no-dynamic-require */
+const env = envs[process.env.NODE_ENV || 'production'];
+const envConfig = require(`./webpack/webpack.${env}.js`);
+module.exports = merge(common, envConfig);

webpack/webpack.common.js

@@ -0,0 +1,96 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const path = require('path');
+
+module.exports = {
+  mode: process.env.NODE_ENV,
+  entry: ['babel-polyfill', './src/index.js'],
+
+  output: {
+    path: path.join(__dirname, '../', 'dist'),
+    publicPath: '/',
+    filename: `[name].[chunkhash].js`,
+    chunkFilename: `[name].[chunkhash].js`,
+    library: 'wlan-cloud-ui-library',
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+
+  externals: [
+    {
+      react: {
+        amd: 'react',
+        commonjs: 'react',
+        commonjs2: 'react',
+        root: 'React',
+      },
+      lodash: {
+        commonjs: 'lodash',
+        commonjs2: 'lodash',
+        amd: 'lodash',
+        root: '_', // indicates global variable
+      },
+      'babel-runtime': {
+        commonjs: 'babel-runtime',
+        commonjs2: 'babel-runtime',
+      },
+      'babel-polyfill': {
+        commonjs: 'babel-polyfill',
+        commonjs2: 'babel-polyfill',
+      },
+      moment: {
+        root: 'moment',
+        commonjs2: 'moment',
+        commonjs: 'moment',
+        amd: 'moment',
+      },
+      highcharts: {
+        root: ['Highcharts', 'highcharts', 'highchartsMore', 'solidGauge'],
+        commonjs2: 'highcharts',
+        commonjs: 'highcharts',
+        amd: 'highcharts',
+      },
+    },
+    'react-dom',
+    'antd',
+    '@ant-design/icons',
+    '@babel/core',
+    'highcharts-react-official',
+    'prop-types',
+    'react-router-dom',
+    'react-jsx-highcharts',
+    'react-jsx-highstock',
+    'uuid',
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|svg|gif|woff|woff2|eot|ttf)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader', 'eslint-loader'],
+      },
+    ],
+  },
+
+  resolve: {
+    modules: [path.resolve('./node_modules'), path.resolve('./src')],
+    alias: {
+      src: path.resolve(__dirname, './src'),
+      react: path.resolve(__dirname, './node_modules/react'),
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      antd: path.resolve(__dirname, './node_modules/antd'),
+      '@ant-design/icons': path.resolve(__dirname, './node_modules/@ant-design/icons'),
+      'prop-types': path.resolve(__dirname, './node_modules/prop-types'),
+      'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom'),
+    },
+  },
+};

webpack/webpack.dev.js

@@ -0,0 +1,54 @@
+module.exports = {
+  devtool: 'inline-source-map',
+  devServer: {
+    port: 3000,
+  },
+  module: {
+    rules: [
+      {
+        // Preprocess 3rd party .css files located in node_modules
+        test: /\.css$/,
+        include: /node_modules/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(css|scss)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+    ],
+  },
+};

webpack/webpack.prod.js

@@ -0,0 +1,103 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+module.exports = {
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          warnings: false,
+          compress: {
+            comparisons: false,
+          },
+          parse: {},
+          mangle: true,
+          output: {
+            comments: false,
+            ascii_only: true,
+          },
+        },
+        parallel: true,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+    nodeEnv: 'production',
+    sideEffects: true,
+    concatenateModules: true,
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      maxInitialRequests: 10,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+            return `npm.${packageName.replace('@', '')}`;
+          },
+        },
+      },
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: false,
+              localsConvention: 'camelCase',
+              modules: {
+                localIdentName: '[local]___[hash:base64:5]',
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader', // compiles Less to CSS
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  plugins: [
+    new CleanWebpackPlugin(),
+
+    new MiniCssExtractPlugin({
+      filename: `css/[name].css`,
+      chunkFilename: `css/[hash].css`,
+    }),
+
+    new CompressionPlugin({
+      algorithm: 'gzip',
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0.8,
+    }),
+  ],
+};