tips / javascript

webpack+BabelでES6の開発環境を整える(SASS/IE11対応)

公開日 : 2019/6/2 最終更新日 : 2019/8/9

ES6のチュートリアルECMAScript 6 Tutorialを進めていたときに、webpackやBabelの部分でエラーが発生してしまうということがあったので(おそらくチュートリアルが4年前から更新されていないため)、公式サイトやブログを参考にしながら整理してみました。

実際のサイトやアプリ制作にも対応できるよう、SASSのコンパイル+ベンダープレフィックス自動付与なども追加します。個人的に実現したい環境は下記になります。

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

※ Macで作業しているため、Windowsでは違う部分があるかもしれません。また、記事中の手順は全ての方の動作を保障するものではありません。

開発環境構築の流れ

Node.jsはインストール済みとします。ローカルで開発するためのwebサーバーはいくつかありますが「webpack-dev-server」を使用します(ほかの開発ツールの利用方法については公式サイトへ)。

1. webpackのインストール

プロジェクトのディレクトリに移動し、npmを初期化(package.jsonが生成される)

npm init -y

webpackとwebpack-cliをインストール (webpack-cliはwebpackをコマンドラインで実行するためのツール)

npm install webpack webpack-cli --save-dev

2. Babelをインストール

Babelに最低限必要な3つのパッケージ、loader、IE11の対応に必要なパッケージをインストール

npm install @babel/core @babel/cli @babel/preset-env babel-loader --save-dev
npm install @babel/polyfill --save-dev

3. ローカルで開発用のアプリケーションを確認するためのwebサーバー(webpack-dev-server)をインストール

npm install webpack-dev-server --save-dev

4. pathモジュールをインストール

npm install path --save-dev

5. SASSやCSSを取り扱うためのloaderなどをインストール

npm install node-sass sass-loader postcss-cli autoprefixer postcss-loader css-loader --save-dev

6. CSSファイルを取り扱うのためのプラグインをインストール

JSファイルとは別にCSSファイルを出力するためのプラグイン「mini-css-extract-plugin」をインストールします。
また、このあとに編集するwebpackの設定ファイルで「entory」にcssを指定するとJSファイルが出力されてしまうバグのようなものを回避するため、プラグイン「webpack-fix-style-only-entries」もインストールします。

npm install mini-css-extract-plugin --save-dev
npm install webpack-fix-style-only-entries --save-dev

7. 「package.json」を編集

「webpack-dev-server」でローカルサーバーを起動した際に、参照するディレクトリを指定します。

"devServer": {
  "contentBase": "./dist"
}

scriptにビルドコマンドやローカルwebサーバーとして「webpack-dev-server」を使用するため「start」に「webpack-dev-server」を指定します。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production",
  "watch": "webpack --watch",
  "start": "webpack-dev-server --mode development"
}

8. webpackの設定ファイル「webpack.config.js」を作成・編集

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const AutoPrefixer = require('autoprefixer');
const path = require('path');
const PATH = {
  scss: path.join(__dirname, './src/scss'),
  js: path.join(__dirname, './src/js')
};

module.exports = [
  {
    entry: {
      index: `${PATH.js}/index.js`
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'assets/js/[name].js'
    },
    devtool: 'inline-source-map',
   // optimization.splitChunksの設定
    optimization: {
      splitChunks: {
        cacheGroups: {
          lib: {
            test: /node_modules/,
            name: 'lib',
            chunks: 'initial',
            enforce: true
          }
        }
      }
    },
    module: {
      rules: [
        {
         test: /\.js$/,
         exclude: [/(node_modules)/, PATH.scss],
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    "@babel/preset-env",
                    {
                      //対応するブラウザおよびバージョンの指定
                      targets: {
                        ie: 11
                      },
                      //ターゲットへの対応に必要なpolyfillsのみを含める
                      useBuiltIns: 'usage'
                    }
                  ]
                ]
              }
            }
          ]
        }
      ]
    }
  },
  {
    entry: {
      style: `${PATH.scss}/main.scss`
    },
    output: {
      path: path.resolve(__dirname, 'dist')
    },
    devtool: process.env.WEBPACK_DEVTOOL || 'source-map',
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                url: false
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  AutoPrefixer(
                    {
                      overrideBrowserslist: ['last 4 versions'],
                      grid: 'autoplace'
                    }
                  )
                ]
              }
            },
            'sass-loader'
          ]
        }
      ]
    },
    plugins: [
      //webpack-fix-style-only-entriesの使用
      new FixStyleOnlyEntriesPlugin(),
      //mini-css-extract-pluginの使用
      new MiniCssExtractPlugin({
        filename: 'assets/css/[name].css'
      }),
    ]
  }
];

以上で設定は終わりです。npm run watch でファイルの更新を監視して自動でコンパイルします。npm run dev でdevelopmentモードでのビルド、 npm run build でproductionモードでのビルドができます。 jQueryを使用する場合は適宜追加でインストールしていきます。

ローカルサーバーの起動コマンドは 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)

View All