Upgrade Webpacker to version 2.0 (#3729)

config/webpack/configuration.js

@@ -1,26 +1,35 @@
-// Common configuration for webpacker loaded from config/webpack/paths.yml
+// Common configuration for webpacker loaded from config/webpacker.yml
 
 const { join, resolve } = require('path');
 const { env } = require('process');
 const { safeLoad } = require('js-yaml');
 const { readFileSync } = require('fs');
 
-const configPath = resolve('config', 'webpack');
+const configPath = resolve('config', 'webpacker.yml');
 const loadersDir = join(__dirname, 'loaders');
-const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV || 'development'];
-const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV || 'development'];
+const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV];
 
-// Compute public path based on environment and CDN_HOST in production
-const ifHasCDN = env.CDN_HOST !== undefined && env.NODE_ENV === 'production';
-const devServerUrl = `http://${env.LOCAL_DOMAIN || devServer.host}:${devServer.port}/${paths.entry}/`;
-const publicUrl = ifHasCDN ? `${env.CDN_HOST}/${paths.entry}/` : `/${paths.entry}/`;
-const publicPath = env.NODE_ENV !== 'production' ? devServerUrl : publicUrl;
+function removeOuterSlashes(string) {
+  return string.replace(/^\/*/, '').replace(/\/*$/, '');
+}
+
+function formatPublicPath(host = '', path = '') {
+  let formattedHost = removeOuterSlashes(host);
+  if (formattedHost && !/^http/i.test(formattedHost)) {
+    formattedHost = `//${formattedHost}`;
+  }
+  const formattedPath = removeOuterSlashes(path);
+  return `${formattedHost}/${formattedPath}/`;
+}
+
+const output = {
+  path: resolve('public', settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path),
+};
 
 module.exports = {
-  devServer,
+  settings,
   env,
-  paths,
   loadersDir,
-  publicUrl,
-  publicPath,
+  output,
 };

config/webpack/development.js

@@ -2,6 +2,7 @@
 
 const merge = require('webpack-merge');
 const sharedConfig = require('./shared.js');
+const { settings, output } = require('./configuration.js');
 
 module.exports = merge(sharedConfig, {
   devtool: 'cheap-module-eval-source-map',
@@ -13,4 +14,19 @@ module.exports = merge(sharedConfig, {
   output: {
     pathinfo: true,
   },
+
+  devServer: {
+    clientLogLevel: 'none',
+    https: settings.dev_server.https,
+    host: settings.dev_server.host,
+    port: settings.dev_server.port,
+    contentBase: output.path,
+    publicPath: output.publicPath,
+    compress: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    historyApiFallback: true,
+    watchOptions: {
+      ignored: /node_modules/,
+    },
+  },
 });

config/webpack/development.server.js

@@ -1,20 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { resolve } = require('path');
-const { env } = require('process');
-const merge = require('webpack-merge');
-const devConfig = require('./development.js');
-const { devServer, publicPath, paths } = require('./configuration.js');
-
-module.exports = merge(devConfig, {
-  devServer: {
-    host: env.LOCAL_DOMAIN ? '0.0.0.0' : devServer.host,
-    port: devServer.port,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    compress: true,
-    historyApiFallback: true,
-    contentBase: resolve(paths.output, paths.entry),
-    publicPath,
-    disableHostCheck: true,
-  },
-});

config/webpack/development.server.yml

@@ -1,17 +0,0 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  enabled: true
-  host: localhost
-  port: 8080
-
-development:
-  <<: *default
-
-test:
-  <<: *default
-  enabled: false
-
-production:
-  <<: *default
-  enabled: false

config/webpack/loaders/sass.js

@@ -7,7 +7,8 @@ module.exports = {
     fallback: 'style-loader',
     use: [
       { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
-      'postcss-loader',
+      { loader: 'postcss-loader', options: { sourceMap: true } },
+      'resolve-url-loader',
       'sass-loader',
     ],
   }),

config/webpack/paths.yml

@@ -1,29 +0,0 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  config: config/webpack
-  entry: packs
-  output: public
-  manifest: manifest.json
-  node_modules: node_modules
-  source: app/javascript
-  extensions:
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
-development:
-  <<: *default
-
-test:
-  <<: *default
-  manifest: manifest-test.json
-
-production:
-  <<: *default

config/webpack/production.js

@@ -7,26 +7,27 @@ const sharedConfig = require('./shared.js');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = merge(sharedConfig, {
-
-  devtool: 'source-map', // separate sourcemap file, suitable for production
-
   output: { filename: '[name]-[chunkhash].js' },
+  devtool: 'source-map', // separate sourcemap file, suitable for production
+  stats: 'normal',
 
   plugins: [
     new webpack.optimize.UglifyJsPlugin({
-      compress: true,
+      sourceMap: true,
       mangle: true,
 
+      compress: {
+        warnings: false,
+      },
+
       output: {
         comments: false,
       },
-
-      sourceMap: true,
     }),
     new CompressionPlugin({
       asset: '[path].gz[query]',
       algorithm: 'gzip',
-      test: /\.(js|css|svg|eot|ttf|woff|woff2)$/,
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/,
     }),
     new BundleAnalyzerPlugin({ // generates report.html and stats.json
       analyzerMode: 'static',

config/webpack/shared.js

@@ -7,21 +7,22 @@ const { sync } = require('glob');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const extname = require('path-complete-extname');
-const { env, paths, publicPath, loadersDir } = require('./configuration.js');
+const { env, settings, output, loadersDir } = require('./configuration.js');
 const localePackPaths = require('./generateLocalePacks');
 
-const extensionGlob = `**/*{${paths.extensions.join(',')}}*`;
-const packPaths = sync(join(paths.source, paths.entry, extensionGlob));
-const entryPacks = [].concat(packPaths).concat(localePackPaths).filter(path => path !== join(paths.source, paths.entry, 'custom.js'));
+const extensionGlob = `**/*{${settings.extensions.join(',')}}*`;
+const entryPath = join(settings.source_path, settings.source_entry_path);
+const packPaths = sync(join(entryPath, extensionGlob));
+const entryPacks = [...packPaths, ...localePackPaths].filter(path => path !== join(entryPath, 'custom.js'));
 
-const customApplicationStyle = resolve(join(paths.source, 'styles/custom.scss'));
-const originalApplicationStyle = resolve(join(paths.source, 'styles/application.scss'));
+const customApplicationStyle = resolve(join(settings.source_path, 'styles/custom.scss'));
+const originalApplicationStyle = resolve(join(settings.source_path, 'styles/application.scss'));
 
 module.exports = {
   entry: entryPacks.reduce(
     (map, entry) => {
       const localMap = map;
-      let namespace = relative(join(paths.source, paths.entry), dirname(entry));
+      let namespace = relative(join(entryPath), dirname(entry));
       if (namespace === join('..', '..', '..', 'tmp', 'packs')) {
         namespace = ''; // generated by generateLocalePacks.js
       }
@@ -33,8 +34,8 @@ module.exports = {
   output: {
     filename: '[name].js',
     chunkFilename: '[name]-[chunkhash].js',
-    path: resolve(paths.output, paths.entry),
-    publicPath,
+    path: output.path,
+    publicPath: output.publicPath,
   },
 
   module: {
@@ -44,7 +45,10 @@ module.exports = {
   plugins: [
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
-    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true }),
+    new ManifestPlugin({
+      publicPath: output.publicPath,
+      writeToFileEmit: true,
+    }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common',
       minChunks: (module, count) => {
@@ -67,15 +71,15 @@ module.exports = {
       'mastodon-application-style': existsSync(customApplicationStyle) ?
                                     customApplicationStyle : originalApplicationStyle,
     },
-    extensions: paths.extensions,
+    extensions: settings.extensions,
     modules: [
-      resolve(paths.source),
-      resolve(paths.node_modules),
+      resolve(settings.source_path),
+      'node_modules',
     ],
   },
 
   resolveLoader: {
-    modules: [paths.node_modules],
+    modules: ['node_modules'],
   },
 
   node: {