Merge pull request #396 from Emurgo/cleanup/webpack

cleanup webpacks

scripts/build.js

@@ -11,4 +11,4 @@ tasks.copyAssets('build', argv.env);
 console.log('[Webpack Build]');
 console.log('-'.repeat(80));
 
-exec(`./node_modules/.bin/webpack --config webpack/${argv.env}.config.js --progress --profile --colors`);
+exec(`./node_modules/.bin/webpack --config webpack/prodConfig.js --progress --profile --colors --env=${argv.env}`);

scripts/start.js

@@ -4,7 +4,7 @@ const createWebpackServer = require('webpack-httpolyglot-server');
 
 const argv = require('minimist')(process.argv.slice(2));
 
-const config = require(`../webpack/${argv.env}.config`);
+const config = require(`../webpack/devConfig`);
 
 tasks.replaceWebpack();
 console.log('[Copy assets]');
@@ -16,7 +16,7 @@ console.log('-'.repeat(80));
 console.log('If you\'re developing Inject page,');
 console.log('please allow `https://localhost:3000` connections in Google Chrome,');
 console.log('and load unpacked extensions with `./dev` folder. (see https://developer.chrome.com/extensions/getstarted#unpacked)\n');
-createWebpackServer(config, {
+createWebpackServer(config.baseDevConfig(argv.env), {
   host: 'localhost',
   port: 3000
 });

webpack/commonConfig.js

@@ -0,0 +1,142 @@
+const path = require('path');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const ConfigWebpackPlugin = require('config-webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
+const shell = require('shelljs');
+
+const plugins = (folder) => ([
+  /** We remove non-English languages from BIP39 to avoid triggering bad word filtering */
+  new webpack.IgnorePlugin(/^\.\/(?!english)/, /bip39\/src\/wordlists$/),
+  /**
+   * We need CardanoWallet for flow to get the WASM binding types.
+   * However, the flow definitions aren't available to webpack at runtime
+   * so we have to mock them out with a noop
+   */
+  new webpack.NormalModuleReplacementPlugin(
+    /CardanoWallet/,
+    'lodash/noop.js'
+  ),
+  /**
+   * We use the HtmlWebpackPlugin to group back together the chunks inside the HTML
+   */
+  new HtmlWebpackPlugin({
+    filename: path.join(__dirname, `../${folder}/main_window.html`),
+    template: path.join(__dirname, '../chrome/views/main_window.html'),
+    chunks: ['yoroi'],
+    alwaysWriteToDisk: true
+  }),
+  new HtmlWebpackPlugin({
+    filename: path.join(__dirname, `../${folder}/background.html`),
+    template: path.join(__dirname, '../chrome/views/background.html'),
+    chunks: ['background'],
+    alwaysWriteToDisk: true
+  }),
+  /**
+   * This plugin adds `alwaysWriteToDisk` to `HtmlWebpackPlugin`.
+   * We need this otherwise the HTML files are managed by in-memory only by our hot reloader
+   * But we need this written to disk so the extension can be loaded by Chrome
+   */
+  new HtmlWebpackHarddiskPlugin(),
+  new ConfigWebpackPlugin(),
+  new webpack.DllReferencePlugin({
+    context: path.join(__dirname, '..', 'dll'),
+    manifest: require('../dll/vendor-manifest.json')
+  }),
+]);
+
+const rules = [
+  // Pdfjs Worker webpack config, reference to issue: https://github.com/mozilla/pdf.js/issues/7612#issuecomment-315179422
+  {
+    test: /pdf\.worker(\.min)?\.js$/,
+    use: 'raw-loader',
+  },
+  {
+    test: /\.css$/,
+    use: [
+      'style-loader',
+      'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+      {
+        loader: 'postcss-loader',
+        options: {
+          plugins: () => [autoprefixer]
+        }
+      }
+    ]
+  },
+  {
+    test: /\.global\.scss$/,
+    use: [
+      'style-loader?sourceMap',
+      'css-loader?sourceMap',
+      'sass-loader?sourceMap'
+    ]
+  },
+  {
+    test: /^((?!\.global).)*\.scss$/,
+    use: [
+      'style-loader?sourceMap',
+      'css-loader?sourceMap&modules&localIdentName=[name]_[local]&importLoaders=1',
+      'sass-loader?sourceMap'
+    ]
+  },
+  {
+    test: /\.svg$/,
+    issuer: /\.scss$/,
+    loader: 'url-loader'
+  },
+  {
+    test: /\.inline\.svg$/,
+    issuer: /\.js$/,
+    loader: 'svg-inline-loader?removeSVGTagAttrs=false&removeTags=true&removingTags[]=title&removingTags[]=desc&idPrefix=[sha512:hash:hex:5]-',
+  },
+  {
+    test: /\.md$/,
+    use: [
+      'html-loader',
+      'markdown-loader',
+    ]
+  },
+  {
+    test: /\.wasm$/,
+    type: 'webassembly/experimental'
+  }
+];
+
+
+const optimization = {
+  // https://github.com/webpack/webpack/issues/7470
+  nodeEnv: false,
+  splitChunks: {
+    // the default delimiter ~ doesn't work with Terser
+    automaticNameDelimiter: '_',
+    chunks: 'all',
+    // Firefox require all files to be <4MBs
+    maxSize: 4000000,
+  }
+};
+
+const node = {
+  fs: 'empty'
+};
+
+const resolve = {
+  extensions: ['*', '.js', '.wasm']
+};
+
+const definePlugin = (networkName) => ({
+  'process.env': {
+    NODE_ENV: JSON.stringify(networkName),
+    COMMIT: JSON.stringify(shell.exec('git rev-parse HEAD', { silent: true }).trim())
+  }
+});
+
+module.exports = {
+  plugins,
+  rules,
+  optimization,
+  node,
+  resolve, 
+  definePlugin,
+};

webpack/devConfig.js

@@ -0,0 +1,79 @@
+const commonConfig = require('./commonConfig');
+
+const path = require('path');
+const webpack = require('webpack');
+
+const host = 'localhost';
+const port = 3000;
+const customPath = path.join(__dirname, './customPublicPath');
+const hotScript =
+  'webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true';
+
+const baseDevConfig = (networkName) => ({
+  mode: 'development',
+  optimization: commonConfig.optimization,
+  node: commonConfig.node,
+  resolve: commonConfig.resolve,
+  devtool: 'eval-source-map',
+  entry: {
+    yoroi: [
+      customPath,
+      hotScript,
+      path.join(__dirname, '../chrome/extension/index')
+    ],
+    background: [
+      customPath,
+      hotScript,
+      path.join(__dirname, '../chrome/extension/background')
+    ]
+  },
+  devMiddleware: {
+    publicPath: `http://${host}:${port}/js`,
+    stats: {
+      colors: true
+    },
+    noInfo: true,
+    headers: { 'Access-Control-Allow-Origin': '*' }
+  },
+  hotMiddleware: {
+    path: '/js/__webpack_hmr'
+  },
+  output: {
+    path: path.join(__dirname, '../dev/js'),
+    filename: '[name].bundle.js',
+    // Need to so `HtmlWebpackPlugin` knows where to find the js bundles
+    publicPath: 'http://localhost:3000/js/'
+  },
+  plugins: [
+    ...commonConfig.plugins('dev'),
+    new webpack.DefinePlugin(commonConfig.definePlugin(networkName)),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.IgnorePlugin(/[^/]+\/[\S]+.prod$/),
+    new webpack.DefinePlugin({
+      __HOST__: `'${host}'`,
+      __PORT__: port,
+    })
+  ],
+  module: {
+    rules: [
+      ...commonConfig.rules,
+      {
+        test: /\.js$/,
+        loader: 'babel-loader?cacheDirectory',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: [/node_modules/, /pdf\.worker(\.min)?\.js$/],
+        use: 'babel-loader?cacheDirectory',
+      },
+      {
+        test: /\.(eot|otf|ttf|woff|woff2|gif)$/,
+        loader: 'file-loader',
+      },
+    ]
+  }
+});
+
+module.exports = { baseDevConfig };