※ Babel 7.4.0で @babel/polyfill が非推奨となり、その修正とあわせて記事全体を加筆・修正いたしました。（2019/10/2）

ES6で開発を行うにあたりwebpackやBabelを使用した環境を、公式サイトやブログを参考にしながら整理しました。普段ボイラープレートとして使用しています。

対応するもの

• ES6をES5に変換
• jQueryなどを使用する場合はプロジェクトのJSファイルとは別にバンドル
• SASSを使用
• CSSファイルはJSファイルとは別に出力
• CSSのベンダープレフィックスを自動で付与
• 開発時はローカルサーバーを起動してホッとリロードさせる

環境・ツール

• webpack
• Babel
• Sass
• ESLint

設定方法

/** package.json */

{
  //...省略

  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "autoprefixer": "^9.6.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "eslint": "^6.5.1",
    "file-loader": "^4.0.0",
    "gsap": "^2.1.3",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "postcss-cli": "^6.1.2",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  },
  "dependencies": {
    "core-js": "^3.2.1",
    "jquery": "^3.4.1"
  }
}

/** .babelrc */

{
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: 11,
          esmodules: true
        },
        useBuiltIns: 'usage',
        corejs: 3
      }
    ]
  ],
}

非推奨となった @babel/polyfill に代わる設定は、こちらのブログを参考にしました。

/** webpack.config.js */

const webpack = require("webpack");
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const AutoPrefixer = require("autoprefixer");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const IS_DEV = process.env.NODE_ENV === "dev";

module.exports = (env) => {
  return {
    entry: {
      common: "./src/js/common.js",
      index: "./src/js/index.js",
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "assets/js/[name].min.js",
    },
    devServer: {
      historyApiFallback: true,
      compress: true,
      contentBase: "./dist",
      hot: true,
      port: 8080,
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "all",
          },
        },
      },
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.(css|scss)$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                url: false,
                sourceMap: IS_DEV,
              },
            },
            {
              loader: "postcss-loader",
              options: {
                plugins: [
                  AutoPrefixer({
                    overrideBrowserslist: ["last 4 versions"],
                    grid: "autoplace",
                  }),
                ],
              },
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: IS_DEV,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        IS_DEV: IS_DEV,
      }),
      new MiniCssExtractPlugin({
        filename: "assets/css/style.css",
      }),
      new HtmlWebpackPlugin({
        template: "src/index.html",
      }),
    ],
  };
};

mini-css-extract-pluginは、CSSファイルをJSファイルとは別に出力するためのプラグインです。

| コマンド | | --------------- | -------------------------------------------------------------------- | | npm run watch | ファイルの更新を監視して自動でコンパイル | | npm run dev | developmentモードでのビルド | | npm run build | productionモードでのビルド | | npm run start | ローカルサーバーhttp://localhost:8000を起動 |

参考

• 株式会社ICS 池田 泰延「最新版で学ぶwebpack 4入門 - Babel 7でES2019環境の構築（React, Vue, Three.js, jQueryのサンプル付き）」（参照2019-06-02）
• webpack 「SplitChunksPlugin」（参照2019-08-09）
• aloerina「Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法」（参照2019-10-01）