fixed webpack

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/dist
 /node_modules
 /.pnp
 .pnp.js

.npmignore

@@ -1,5 +1,6 @@
 /.git
 /node_modules
+/coverage
 /src
 /.gitignore
 /.npmignore

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tip-wlan/wlan-cloud-ui-library",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "author": "ConnectUs",
   "description": "React UI Library",
   "engines": {
@@ -11,7 +11,7 @@
     "format": "prettier --write \"src/**/*.js\"",
     "eslint-fix": "eslint --fix \"src/**/*.js\" --max-warnings=0",
     "eslint": "eslint \"src/**/*.js\" --max-warnings=0",
-    "build": "webpack --mode production",
+    "build": "webpack --mode=production",
     "prepublishOnly": "npm run build",
     "watch:js": "npm run build -- -w",
     "watch": "npm run build && npm run watch:js",
@@ -51,6 +51,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-root-import": "^6.4.1",
+    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.4.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -70,8 +71,10 @@
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "lint-staged": "^10.0.8",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
+    "mini-css-extract-plugin": "^1.2.1",
     "node-sass": "^4.14.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "prop-types": "^15.7.2",
@@ -83,8 +86,8 @@
     "react-test-renderer": "^16.13.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.42.0",
+    "terser-webpack-plugin": "^2.3.5",
+    "webpack": "^4.44.2",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   },

webpack.config.js

@@ -1,4 +1,8 @@
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   mode: process.env.NODE_ENV,
@@ -11,6 +15,38 @@ module.exports = {
     libraryTarget: 'umd',
     umdNamedDefine: true,
   },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        // Use multi-process parallel running to improve the build speed
+        // Default number of concurrent runs: os.cpus().length - 1
+        parallel: true,
+      }),
+      new OptimizeCSSAssetsPlugin(),
+    ],
+    // Automatically split vendor and commons
+    // https://twitter.com/wSokra/status/969633336732905474
+    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'initial',
+        },
+        async: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'async',
+          chunks: 'async',
+          minChunks: 4,
+        },
+      },
+    },
+    // Keep the runtime chunk seperated to enable long term caching
+    // https://twitter.com/wSokra/status/969679223278505985
+    runtimeChunk: true,
+  },
   externals: [
     {
       react: {
@@ -20,16 +56,19 @@ module.exports = {
         root: 'React',
       },
     },
-    'react-dom',
-    'antd',
     '@ant-design/icons',
+    'antd',
+    'highcharts',
+    'highcharts-react-official',
+    'history',
+    'lodash',
+    'moment',
     'prop-types',
+    'react-dom',
+    'react-jsx-highcharts',
+    'react-jsx-highstock',
     'react-router-dom',
   ],
-  devtool: 'inline-source-map',
-  devServer: {
-    port: 3000,
-  },
   module: {
     rules: [
       {
@@ -37,43 +76,19 @@ module.exports = {
         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',
-          },
+          MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
+              sourceMap: false,
+              localsConvention: 'camelCase',
               modules: {
                 localIdentName: '[name]__[local]___[hash:base64:5]',
               },
-              sourceMap: true,
             },
           },
           {
@@ -95,4 +110,12 @@ module.exports = {
       'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom'),
     },
   },
+
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: `css/[name].css`,
+      chunkFilename: `css/[name].css`,
+    }),
+  ],
 };