This is part of my article Yarn 2 and TypeScript: Adding Webpack, https://medium.com/@thegrimsilence/yarn-2-and-typescript-adding-webpack-9dd9d24001f7.

base.config.ts

import { Configuration } from "webpack";
import { resolve } from "path";

/** Check if we're using development or production. */
const isProductionBuild: boolean = process.env.NODE_ENV == "production";

/** A basic Webpack config, using some TypeScript sytactic sugar. */
const config: Configuration = {
  // Here we name our entry "app", you can also add others with any non-reserved names.
  entry: {
    app: resolve(__dirname, "path-to-your-file.js"),
  },
  // We set the build mode based on our environment, under the hood alterations are made.
  mode: isProductionBuild ? "production" : "development",
  module: {
    rules: [
      // Here we've told Webpack to look for inline sourcemaps and extract them.
      {
        enforce: "pre",
        // We only want js files, don't add typescript.
        test: /\.js$/,
        loader: "source-map-loader",
      },
    ],
  },
  output: {
    // This uses Webpack's substitutions to use our entry name, which you can read more at https://v4.webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate
    filename: "[name].js",
    // We want our code to go back into dist, if you're using
    // TypeScript and webpack separately, you could output to build.
    path: resolve(__dirname, "dist"),
  },
  // We want to make sure we're not adding anything we don't need like browser libraries
  target: "async-node",
};

export default config;