Webpack 3 configuration for Dovetail

configuration.js

// Common configuration for webpacker loaded from config/webpack/paths.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 loadersDir = join(__dirname, "loaders");
const paths = safeLoad(readFileSync(join(configPath, "paths.yml"), "utf8"))[env.NODE_ENV];
const devServer = safeLoad(readFileSync(join(configPath, "development.server.yml"), "utf8"))[env.NODE_ENV];

// Compute public path based on environment and ASSET_HOST in production
const ifHasCDN = env.ASSET_HOST !== undefined && env.NODE_ENV === "production";
const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`;
const publicUrl = ifHasCDN ? `${env.ASSET_HOST}/${paths.entry}/` : `/${paths.entry}/`;
const publicPath = env.NODE_ENV !== "production" ? devServerUrl : publicUrl;

module.exports = {
  devServer,
  env,
  paths,
  loadersDir,
  publicUrl,
  publicPath
};

development.js

// Note: You must restart bin/webpack-dev-server for changes to take effect

const merge = require('webpack-merge');
const sharedConfig = require('./shared.js');

module.exports = merge(sharedConfig, {
  devtool: 'sourcemap',

  stats: {
    errorDetails: true,
  },

  output: {
    pathinfo: true,
  },
});

paths.yml

# 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
    - .jsx
    - .ts
    - .tsx
    - .svg.tsx
    - .vue
    - .png
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default

test:
  <<: *default
  manifest: manifest-test.json

production:
  <<: *default

production.js

// Note: You must restart bin/webpack-dev-server for changes to take effect

/* eslint global-require: 0 */

const webpack = require("webpack");
const merge = require("webpack-merge");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const sharedConfig = require("./shared.js");
// Emit source map for bundle analysis as well as Sentry stack traces.
const emitSourceMap = true;

module.exports = merge(sharedConfig, {
  devtool: emitSourceMap ? "sourcemap" : "none",

  output: { filename: "[name]-[chunkhash].js" },

  plugins: [
    new UglifyJSPlugin({
      uglifyOptions: {
        beautify: false,
        ecma: 6,
        compress: {
          // Function inlining is broken (does not properly use unique
          // identifiers) and must be restricted only to "simple functions".
          // See https://github.com/mishoo/UglifyJS2/issues/2842
          inline: 1
        },
        comments: false,
        sourceMap: emitSourceMap
      }
    }),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.(js|css|eot|ttf|woff|woff2)$/
    })
  ]
});

shared.js

// Note: You must restart bin/webpack-dev-server for changes to take effect

/* eslint global-require: 0 */
/* eslint import/no-dynamic-require: 0 */

const { TsConfigPathsPlugin } = require("awesome-typescript-loader");
const webpack = require("webpack");
const { basename, dirname, join, relative, resolve } = require("path");
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, tsconfigPath } = require("./configuration.js");

const extensionGlob = `**/*{${paths.extensions.join(",")}}*`;
const packPaths = sync(join(paths.source, paths.entry, extensionGlob));

module.exports = {
  entry: packPaths.reduce((map, entry) => {
    const localMap = map;
    const namespace = relative(join(paths.source, paths.entry), dirname(entry));
    localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry);
    return localMap;
  }, {}),

  output: {
    filename: "[name].js",
    path: resolve(paths.output, paths.entry),
    publicPath
  },

  module: {
    rules: sync(join(loadersDir, "*.js")).map(loader => require(loader))
  },

  plugins: [
    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
    new ExtractTextPlugin(env.NODE_ENV === "production" ? "[name]-[hash].css" : "[name].css"),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })
  ],

  resolve: {
    extensions: paths.extensions,
    modules: [resolve(paths.source), resolve(paths.node_modules)],
    plugins: [new TsConfigPathsPlugin({ configFileName: "tsconfig.json" })]
  },

  resolveLoader: {
    modules: [paths.node_modules]
  }
};

test.js

// Note: You must restart bin/webpack-dev-server for changes to take effect

const merge = require('webpack-merge');
const sharedConfig = require('./shared.js');

module.exports = merge(sharedConfig, {});

webpack

#!/usr/bin/env ruby
$stdout.sync = true

require "shellwords"
require "yaml"

ENV["RAILS_ENV"] ||= "development"
RAILS_ENV   = ENV["RAILS_ENV"]

ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV    = ENV["NODE_ENV"]

APP_PATH               = File.expand_path("../", __dir__)
CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")

begin
  paths            = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]

  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
rescue Errno::ENOENT, NoMethodError
  puts "Configuration not found in config/webpack/paths.yml"
  puts "Please run bundle exec rails webpacker:install to install webpacker"
  exit!
end

WEBPACK_BIN    = "#{NODE_MODULES_PATH}/.bin/webpack"
WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"

Dir.chdir(APP_PATH) do
  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
    " #{ARGV.join(" ")}"
end

webpack-dev-server

#!/usr/bin/env ruby
$stdout.sync = true

require "shellwords"
require "yaml"

ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]

ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]

APP_PATH    = File.expand_path("../", __dir__)
CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")

begin
  paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]

  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])

  WEBPACK_BIN       = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
  DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
rescue Errno::ENOENT, NoMethodError
  puts "Configuration not found in config/webpacker/paths.yml."
  puts "Please run bundle exec rails webpacker:install to install webpacker"
  exit!
end

Dir.chdir(APP_PATH) do
  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
    "--config #{DEV_SERVER_CONFIG} #{ARGV.join(" ")}"
end