WebPack で jQuery 3 / Bootstrap 4 / FontAwesome

package.json

{
  "name": "webpack-jquery-bootstrap-fontawesome",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "bootstrap": "4.0.0-beta",
    "css-loader": "^0.28.7",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "node-sass": "^4.5.3",
    "popper.js": "^1.12.5",
    "postcss-loader": "^2.0.6",
    "precss": "^2.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "webpack": "^3.6.0"
  }
}

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const vendorScript = {
  entry: ["jquery", "popper.js", "bootstrap"],
  output: {
    filename: "vendor.js",
    path: path.join(__dirname, "dist/scripts")
  },
  module: {
    rules: [{
      test: require.resolve("jquery"),
      use: [{
        loader: "expose-loader", // global に jQuery / $ を公開
        options: "jQuery"
      }, {
        loader: "expose-loader",
        options: "$"
      }]
    }]
  },
  plugins: [
    // bootstrap のコードから jQuery が直接見えるように
    // http://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: ["popper.js", "default"]
    })
  ]
};

const bootstrapDir = path.join(__dirname, "node_modules/bootstrap");
const fontawesomeDir = path.join(__dirname, "node_modules/font-awesome");
const vendorStyle = {
  entry: [
    path.join(bootstrapDir, "scss/bootstrap.scss"),
    path.join(fontawesomeDir, "css/font-awesome.css")
  ],
  output: {
    path: path.join(__dirname, "dist/styles"),
    filename: "vendor.css"
  },
  module: {
    rules: [{
      test: /\.scss$/, // http://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-precompiled-sass
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: function () {
                return [ 
                  require("precss"),
                  require("autoprefixer")
                ];
              }
            }
          },
          "sass-loader"
        ]
      })
    },
    {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("css-loader")
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
      loader: "file-loader?name=../fonts/[name].[ext]" // パスは output 指定からの相対
    }]
  },
  plugins: [
    new ExtractTextPlugin("../styles/vendor.css") // パスは output 指定からの相対
  ]
};

module.exports = [vendorScript, vendorStyle];