webpack 導入編

// パスの取得
const path = require("path");
// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = "development";
// ソースマップの利用有無(productionのときはソースマップを利用しない)
const enabledSourceMap = MODE === "development";
// プラグイン
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  // production: 最適化された状態で出力
  // development: ソースマップが有効された状態でJSファイルが出力
  mode: MODE,
  // エントリーポイントとなる.jsファイル（ /src/index.js の場合は省略可能）
  entry: `./src/assets/js/index.js`,
  // ファイルの出力設定
  output: {
    path: path.join(__dirname, "dist"), // 出力ファイルのディレクトリ名（ /dist/ の場合は省略可能）
    publicPath: "/assets/js/", // ブラウザからバンドルにアクセスする際のパス
    filename: "bundle.js" // 出力ファイル名
  },
  module: {
    rules: [
      {
        // .js の場合
        test: /\.js$/,
        use: [
          {
            // Babel を利用する
            loader: "babel-loader",
            // Babel のオプションを指定する
            options: {
              presets: [
                // プリセットを指定することで、ES2018 を ES5 に変換
                "@babel/preset-env"
              ]
            }
          }
        ]
      },
      // .html の場合
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      // .scss の場合
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        use: [
          // linkタグに出力する機能
          "style-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
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    })
  ],
  // devServer ローカル開発用環境を立ち上げる
  devServer: {
    contentBase: path.join(__dirname, "dist"), // HTML等コンテンツのルートディレクトリ
    open: true, //実行時にブラウザが自動的に localhost を開く
    port: 3000, // ポート番号
    watchContentBase: true // コンテンツの変更監視をする
    // inline: true // ライブリロードをページ全体に適用
    // hot: false // 変更のあったコンポーネントのみをリロード
  }
};