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

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

## 対応するもの

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

## 環境・ツール

- [webpack](https://webpack.js.org/)
- [Babel](https://babeljs.io/)
- [Sass](https://sass-lang.com/)
- [ESLint](https://eslint.org/)

## 設定方法

```js
/** 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"
  }
}
```

```js
/** .babelrc */

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

非推奨となった `@babel/polyfill` に代わる設定は、[こちらのブログ](https://aloerina01.github.io/blog/2019-06-21-1)を参考にしました。

```js
/** 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](https://github.com/webpack-contrib/mini-css-extract-plugin)は、CSSファイルをJSファイルとは別に出力するためのプラグインです。

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

## 参考

- 株式会社ICS 池田 泰延「[最新版で学ぶwebpack 4入門 - Babel 7でES2019環境の構築（React, Vue, Three.js, jQueryのサンプル付き）](https://ics.media/entry/16028/)」（参照2019-06-02）
- webpack 「[SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/)」（参照2019-08-09）
- aloerina「[Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法](https://aloerina01.github.io/blog/2019-06-21-1)」（参照2019-10-01）


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

Tags