chore(core): remove happypack in favor of thread-loader/cache-loader

I was trying to fix lint warnings (which happypack was somehow eating). HappyPack 4.0.0 has [fixed the problem](amireh/happypack#161 (comment)). However, it has also [removed support for caching](amireh/happypack#154 (comment)). There are now loaders which can effectively replace what we used happypack for (thread-loader and cache-loader).
christopherthielen · Oct 25, 2017 · 9823dfd · 9823dfd
1 parent ababde6
commit 9823dfd
Show file tree

Hide file tree

Showing 8 changed files with 337 additions and 308 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,7 @@ test/google/node_modules/
 .awcache/
 .gradle/
 .happypack/
+**/.cache-loader
 .yalc
 yalc.lock
 build/

diff --git a/app/scripts/modules/amazon/webpack.config.js b/app/scripts/modules/amazon/webpack.config.js
@@ -3,9 +3,6 @@
 const path = require('path');
 const basePath = path.join(__dirname, '..', '..', '..', '..');
 const NODE_MODULE_PATH = path.join(basePath, 'node_modules');
-const HappyPack = require('happypack');
-const HAPPY_PACK_POOL_SIZE = process.env.HAPPY_PACK_POOL_SIZE || 3;
-const happyThreadPool = HappyPack.ThreadPool({size: HAPPY_PACK_POOL_SIZE});
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const webpack = require('webpack');
@@ -28,6 +25,7 @@ module.exports = {
     'exports-loader?"n3-line-chart"!n3-charts/build/LineChart.js',
     nodeExternals({ modulesDir: '../../../../node_modules' }),
   ],
+  stats: 'errors-only',
   resolve: {
     extensions: ['.json', '.js', '.jsx', '.ts', '.tsx', '.css', '.less', '.html'],
     modules: [
@@ -44,33 +42,72 @@ module.exports = {
   devtool: 'source-map',
   module: {
     rules: [
-      {test: /\.js$/, use: ['happypack/loader?id=js'], exclude: exclusionPattern},
-      {test: /\.tsx?$/, use: ['happypack/loader?id=ts'], exclude: exclusionPattern},
-      {test: /\.(woff|otf|ttf|eot|svg|png|gif|ico)(.*)?$/, use: 'file-loader'},
-      {test: /\.json$/, loader: 'json-loader'},
       {
-        test: require.resolve('jquery'),
+        test: /\.js$/,
         use: [
-          'expose-loader?$',
-          'expose-loader?jQuery'
-        ]
+          { loader: 'cache-loader' },
+          { loader: 'thread-loader', options: { workers: 3 } },
+          { loader: 'babel-loader' },
+          { loader: 'envify-loader' },
+          { loader: 'eslint-loader' } ,
+        ],
+        exclude: exclusionPattern
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          { loader: 'cache-loader' },
+          { loader: 'thread-loader', options: { workers: 3 } },
+          { loader: 'babel-loader' },
+          { loader: 'ts-loader', options: { happyPackMode: true } },
+          { loader: 'tslint-loader' },
+        ],
+        exclude: exclusionPattern
       },
       {
         test: /\.less$/,
-        use: ['happypack/loader?id=less']
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'postcss-loader' },
+          { loader: 'less-loader' },
+        ],
       },
       {
         test: /\.css$/,
         use: [
-          'style-loader',
-          'css-loader'
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'postcss-loader' },
         ]
       },
       {
         test: /\.html$/,
-        use: ['happypack/loader?id=lib-html'],
         exclude: exclusionPattern,
-      }
+        use: [
+          { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname)) + '&prefix=amazon' },
+          { loader: 'html-loader' },
+        ]
+      },
+      {
+        test: /\.json$/,
+        use: [
+          { loader: 'json-loader' },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|otf|ttf|eot|png|gif|ico|svg)$/,
+        use: [
+          { loader: 'file-loader', options: { name: '[name].[hash:5].[ext]'} },
+        ],
+      },
+      {
+        test: require.resolve('jquery'),
+        use: [
+          { loader: 'expose-loader?$' },
+          { loader: 'expose-loader?jQuery' },
+        ],
+      },
     ],
   },
   plugins: [
@@ -81,40 +118,5 @@ module.exports = {
       comments: false,
       sourceMap: true,
     }),
-    new HappyPack({
-      id: 'lib-html',
-      loaders: [
-        'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname)) + '&prefix=amazon',
-        'html-loader'
-      ],
-      threadPool: happyThreadPool
-    }),
-    new HappyPack({
-      id: 'js',
-      loaders: [
-        'babel-loader',
-        'envify-loader',
-        'eslint-loader'
-      ],
-      threadPool: happyThreadPool,
-    }),
-    new HappyPack({
-      id: 'ts',
-      loaders: [
-        'babel-loader',
-        { path: 'ts-loader', query: { happyPackMode: true } },
-        'tslint-loader',
-      ],
-      threadPool: happyThreadPool,
-    }),
-    new HappyPack({
-      id: 'less',
-      loaders: [
-        'style-loader',
-        'css-loader',
-        'less-loader'
-      ],
-      threadPool: happyThreadPool
-    }),
   ],
 };
diff --git a/app/scripts/modules/core/webpack.config.js b/app/scripts/modules/core/webpack.config.js
@@ -3,9 +3,6 @@
 const path = require('path');
 const basePath = path.join(__dirname, '..', '..', '..', '..');
 const NODE_MODULE_PATH = path.join(basePath, 'node_modules');
-const HappyPack = require('happypack');
-const HAPPY_PACK_POOL_SIZE = process.env.HAPPY_PACK_POOL_SIZE || 3;
-const happyThreadPool = HappyPack.ThreadPool({size: HAPPY_PACK_POOL_SIZE});
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const webpack = require('webpack');
@@ -44,34 +41,72 @@ module.exports = {
   watch:  process.env.WATCH === 'true',
   module: {
     rules: [
-      {test: /\.js$/, use: ['happypack/loader?id=js'], exclude: exclusionPattern},
-      {test: /\.tsx?$/, use: ['happypack/loader?id=ts'], exclude: exclusionPattern},
-      {test: /\.json$/, loader: 'json-loader'},
-      {test: /\.(woff|otf|ttf|eot|png|gif|ico|svg)(.*)?$/, use: 'file-loader'},
       {
-        test: require.resolve('jquery'),
+        test: /\.js$/,
         use: [
-          'expose-loader?$',
-          'expose-loader?jQuery'
-        ]
+          { loader: 'cache-loader' },
+          { loader: 'thread-loader', options: { workers: 3 } },
+          { loader: 'babel-loader' },
+          { loader: 'envify-loader' },
+          { loader: 'eslint-loader' } ,
+        ],
+        exclude: exclusionPattern
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          { loader: 'cache-loader' },
+          { loader: 'thread-loader', options: { workers: 3 } },
+          { loader: 'babel-loader' },
+          { loader: 'ts-loader', options: { happyPackMode: true } },
+          { loader: 'tslint-loader' },
+        ],
+        exclude: exclusionPattern
       },
       {
         test: /\.less$/,
-        use: ['happypack/loader?id=less']
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'postcss-loader' },
+          { loader: 'less-loader' },
+        ],
       },
       {
         test: /\.css$/,
         use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader'
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'postcss-loader' },
         ]
       },
       {
         test: /\.html$/,
-        use: ['happypack/loader?id=lib-html'],
         exclude: exclusionPattern,
-      }
+        use: [
+          { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname)) + '&prefix=core' },
+          { loader: 'html-loader' },
+        ]
+      },
+      {
+        test: /\.json$/,
+        use: [
+          { loader: 'json-loader' },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|otf|ttf|eot|png|gif|ico|svg)$/,
+        use: [
+          { loader: 'file-loader', options: { name: '[name].[hash:5].[ext]'} },
+        ],
+      },
+      {
+        test: require.resolve('jquery'),
+        use: [
+          { loader: 'expose-loader?$' },
+          { loader: 'expose-loader?jQuery' },
+        ],
+      },
     ],
   },
   plugins: [
@@ -82,40 +117,5 @@ module.exports = {
       comments: true,
       sourceMap: true,
     }),
-    new HappyPack({
-      id: 'lib-html',
-      loaders: [
-        'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname)) + '&prefix=core',
-        'html-loader'
-      ],
-      threadPool: happyThreadPool
-    }),
-    new HappyPack({
-      id: 'js',
-      loaders: [
-        'babel-loader',
-        'envify-loader',
-        'eslint-loader',
-      ],
-      threadPool: happyThreadPool,
-    }),
-    new HappyPack({
-      id: 'ts',
-      loaders: [
-        'babel-loader',
-        { path: 'ts-loader', query: { happyPackMode: true } },
-        'tslint-loader',
-      ],
-      threadPool: happyThreadPool,
-    }),
-    new HappyPack({
-      id: 'less',
-      loaders: [
-        'style-loader',
-        'css-loader',
-        'less-loader'
-      ],
-      threadPool: happyThreadPool
-    }),
   ],
 };