feat(webpack): create basic production and dev config

package.json

@@ -107,7 +107,8 @@
     "webpack": "^4.20.2",
     "webpack-build-notifier": "^0.1.30",
     "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.1.2"
+    "webpack-cli": "^3.1.2",
+    "webpack-merge": "^4.1.4"
   },
   "resolutions": {
     "jquery": "^3.3.1"

webpack.config.js

@@ -1,116 +1 @@
-const path = require('path');
+module.exports = require('./webpack/webpack.develop');
-const { ProvidePlugin, ContextReplacementPlugin } = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
-const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const npmPackage = require('./package.json');
-
-module.exports = {
-  entry: {
-    main: './app/__module.js'
-  },
-  output: {
-    filename: '[name].[hash].js',
-    path: path.resolve(__dirname, 'dist/public')
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: [
-          'babel-loader',
-          'auto-ngtemplate-loader',
-          {
-            // enforce: 'pre',
-            loader: 'eslint-loader'
-          }
-        ]
-      },
-      {
-        test: /\.html$/,
-        exclude: path.resolve(__dirname, './app/index.html'),
-        use: [
-          { loader: 'ngtemplate-loader', options: { relativeTo: __dirname } },
-          { loader: 'html-loader' }
-        ]
-      },
-      {
-        test: /\.(woff|woff2|eot|ttf|svg|)$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: { limit: 25000 }
-          }
-        ]
-      },
-      {
-        test: /\.(ico|png|jpg|gif)$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 25000
-            }
-          }
-        ]
-      },
-      {
-        test: /.xml$/,
-        use: 'file-loader'
-      },
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap']
-      }
-    ]
-  },
-  mode: 'development',
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './app/index.html',
-      templateParameters: {
-        name: npmPackage.name,
-        author: npmPackage.author
-      },
-      manifest: './assets/ico/manifest.json'
-    }),
-    new WebpackBuildNotifierPlugin({
-      title: 'Portainer build',
-      logo: path.resolve('./assets/favicon-32x32.png'),
-      suppressSuccess: true
-    }),
-    new CleanTerminalPlugin(),
-    new ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery',
-      'window.jQuery': 'jquery'
-    }),
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-      sourceMap: true
-    }),
-    new CleanWebpackPlugin(['dist/public']),
-    new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
-    new BundleAnalyzerPlugin()
-  ],
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: /node_modules/,
-          chunks: 'initial',
-          name: 'vendor',
-          priority: 10,
-          enforce: true
-        }
-      }
-    }
-  }
-};

webpack/proudction.config.js

@@ -0,0 +1,4 @@
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = webpackMerge(commonConfig);

webpack/webpack.common.js

@@ -0,0 +1,121 @@
+const path = require('path');
+const { ProvidePlugin, ContextReplacementPlugin } = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
+const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const npmPackage = require('../package.json');
+const projectRoot = path.resolve( __dirname, '..');
+
+module.exports = {
+  entry: {
+    main: './app/__module.js'
+  },
+  output: {
+    filename: '[name].[hash].js',
+    path: path.resolve(projectRoot, 'dist/public')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          'babel-loader',
+          'auto-ngtemplate-loader',
+          {
+            // enforce: 'pre',
+            loader: 'eslint-loader'
+          }
+        ]
+      },
+      {
+        test: /\.html$/,
+        exclude: path.resolve(projectRoot, './app/index.html'),
+        use: [
+          {
+            loader: 'ngtemplate-loader',
+            options: {
+              relativeTo: projectRoot
+            }
+          },
+          { loader: 'html-loader' }
+        ]
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|svg|)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: { limit: 25000 }
+          }
+        ]
+      },
+      {
+        test: /\.(ico|png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 25000
+            }
+          }
+        ]
+      },
+      {
+        test: /.xml$/,
+        use: 'file-loader'
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap']
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './app/index.html',
+      templateParameters: {
+        name: npmPackage.name,
+        author: npmPackage.author
+      },
+      manifest: './assets/ico/manifest.json'
+    }),
+    new WebpackBuildNotifierPlugin({
+      title: 'Portainer build',
+      logo: path.resolve('./assets/favicon-32x32.png'),
+      suppressSuccess: true
+    }),
+    new CleanTerminalPlugin(),
+    new ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+      sourceMap: true
+    }),
+    new CleanWebpackPlugin(['dist/public']),
+    new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
+    // new BundleAnalyzerPlugin()
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /node_modules/,
+          chunks: 'initial',
+          name: 'vendor',
+          priority: 10,
+          enforce: true
+        }
+      }
+    }
+  }
+};

webpack/webpack.develop.js

@@ -0,0 +1,13 @@
+const path = require('path');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+  // devtool: 'cheap-module-source-map',
+  mode: 'development',
+  devServer: {
+    contentBase: path.join(__dirname, '.tmp'),
+    compress: true,
+    port: 90000
+  }
+});

yarn.lock

@@ -5591,7 +5591,7 @@ lodash@^4.17.10:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
   integrity sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==
 
-lodash@^4.17.3, lodash@~4.17.4:
+lodash@^4.17.3, lodash@^4.17.5, lodash@~4.17.4:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -9167,6 +9167,13 @@ webpack-cli@^3.1.2:
     v8-compile-cache "^2.0.2"
     yargs "^12.0.2"
 
+webpack-merge@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.4.tgz#0fde38eabf2d5fd85251c24a5a8c48f8a3f4eb7b"
+  integrity sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ==
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"