WordPress に Vue.js を スモールスタートで入れてみる その1

const TerserPlugin            = require('terser-webpack-plugin');
const MiniCssExtractPlugin    = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const VueLoaderPlugin         = require('vue-loader/lib/plugin');

// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = 'production';

// ソースマップの利用有無 production or development (productionのときはソースマップを利用しない)
const enabledSourceMap = (MODE === 'production');

module.exports = {
  name: "app",
  externals: {
    Vue: "Vue"
  },
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: MODE,
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: {
    "app": './src/js/app.js'
  },
  // ファイルの出力設定
  output: {
    // 出力ファイルのディレクトリ名
    path: `${__dirname}/themes/_assets/js`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  // CSS minify と sourceMap の出力のための設定
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        sourceMap: true,
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
            annotation: true,
          }
        }
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            // Babel を利用する
            loader: 'vue-loader',
          }
        ]
      },
      {
        // .js の場合
        test: /\.js$/,
        use: [
          {
            // Babel を利用する
            loader: 'babel-loader',
            // Babel のオプションを指定する
            options: {
              presets: [
                // プリセットを指定することで、ES2018 を ES5 に変換
                '@babel/preset-env'
              ]
            }
          }
        ]
      },
      // Sassファイルの読み込みとコンパイル
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        use:
          [
            // CSSファイルを書き出すオプションを有効にする
            {
              loader: MiniCssExtractPlugin.loader,
            },
            // CSSをバンドルするための機能
            {
              loader: 'css-loader',
              options: {
                // オプションでCSS内のurl()メソッドの取り込みを禁止する
                url: false,
                // ソースマップの利用有無
                sourceMap: enabledSourceMap,

                // 0 => no loaders (default);
                // 1 => postcss-loader;
                // 2 => postcss-loader, sass-loader
                importLoaders: 2
              }
            },
            {
              loader: 'sass-loader',
              options: {
                // ソースマップの利用有無
                sourceMap: enabledSourceMap,
              }
            }
          ]
      }
    ]
  },
  // 完全ビルドされたVue.jsを読み込むように変更
  // ref: https://aloerina01.github.io/blog/2017-03-08-1
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    // CSSファイルを外だしにするプラグイン
    new MiniCssExtractPlugin({
      // ファイル名を設定します（output.path から見た階層）
      filename: './../css/app.css',
    }),
    // Vue loader プラグイン
    new VueLoaderPlugin()
  ]
};