ES6開発環境（webpack+Babel, SASS, IE11対応）

※ 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）