Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
21
Help us understand the problem. What is going on with this article?
@senou

ベーシックなWebpackの導入と設定

More than 3 years have passed since last update.

毎回記事を見たりドキュメントを見ながら設定しているので、一度まとめてみる。
ドキュメントをもとにwebpackの設定と導入を行う。

webpackのインストール

まずは、webpackのインストールを行う。

# 作業ディレクトリで行うものとする
yarn init
yarn add webpack --dev

ディレクトリとファイルの準備

webpackはjsファイルの依存関係を解決するバンドラーである。
つまり、importされたモジュールやライブラリの依存関係を解決して1つのjsファイルを作成してくれる。
そのために、jsを自分で記述するファイルと自分が記述したファイルをまとめて吐き出すファイルが必要になる。
これらディレクトリから分けた方が管理がしやすいため、srcdistというディレクトリを作成する。
src/には自分で記述するjsファイルを、dist/にはsrc/に記述したjsファイルをまとめたものを吐き出すファイルを用意する。
ディレクトリ構成は以下のようになる。

project(作業ディレクトリ)
 |
 |-dist
 |  |-build.js
 |
 |-src
 |  |-index.js

Web上で使用されるのはバンドルされたbuild.jsになる。
build.jsを読み込むhtmlはdist/以下に置く。

結論としては以下のようになる。

project(作業ディレクトリ)
 |-package.json
 |-dist
 |  |-build.js
 |  |-index.html
 |
 |-src
 |  |-index.js

ディレクトリが準備できたらindex.jsに記述したり、必要に応じてsrc/以下にファイルを追加してそこに記述していったりする。
記述はES6や、より新しいEcmaScriptで書くと良さそう。
書き方は本記事では紹介しませんが、ライブラリや別ファイルで作成したクラスなどをimportすることで、必要以上にindex.jsが太ることもなく記述できます。

webpackの実行

コードを記述したらバンドルして、build.jsに吐き出す。
以下のコマンドでwebpackを実行する。

./node_modules/.bin/webpack src/index.js dist/bundle.js

webpackの設定をする

設定をすることで、コマンドにおいて吐き出し先のファイルなどを設定する必要がなくなる。
ディレクトリ直下にwebpack.config.jsを作成する。

project(作業ディレクトリ)
 |-package.json
 |-webpack.config.js
 |-dist
 |  |-build.js
 |  |-index.html
 |
 |-src
 |  |-index.js

webpack.config.jsには以下のように記述する。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

スクリプトを書く

確認の度に、webpackを実行するのは面倒なので、package.jsonに実行コマンドを記述する。

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

変更の度に実行してほしい場合は、以下のようにする。

{
  ...
  "scripts": {
    "build": "webpack --watch"
  },
  ...
}

あとは、CLIで以下のコマンドを実行する。

yarn run build

webpack-dev-serverを導入する

yarn run buildで保存の度にwebpackが実行されるようになったが、ブラウザで確認するためには、毎回リロードしなくてはならない。
webpackが実行されたら、ブラウザにも反映されるようにしたいので、webpack-dev-serverを導入する。

ターミナルで以下を実行する。

yarn add webpack-dev-server --dev

コマンドを短縮するために、package.jsonのscriptsに追加する。

// 省略
"scripts": {
  "start: "webpack-dev-server --open"
}

これで、ターミナルでyarn run startとするとwebpackが実行され、そのあとでブラウザが立ち上がる。

source mapを使用する

バンドルされたファイルでエラーが発見されたときに、バンドルされたファイルでエラー箇所が示されるが、実際に修正するべきなのは個々のファイルなので役に立たない。
バンドル前のファイルでエラー箇所を教えてもらうためにsource mapを使用する。
使用するには、webpack.config.jsに書き足すだけ。

devtool: 'inline-source-map'

Babelでトランスパイルする

webpackはバンドラーなので、ファイル内の依存関係を解決したファイルを生成するツール。
ブラウザが対応していないJavaScriptを記述すると動かなくなってしまう。
このようなJavaScriptをブラウザが対応しているJavaScriptに変換することをトランスパイルという。
トランスパイルを行ってくれるツールがBabelである。

モジュールをインストールする

まずは、Babelなど必要なモジュールをインストールする。

yarn add babel-core babel-loader babel-preset-env --dev

webpack.config.jsにbabelを使用するように記述する。
rulesloaderbabel-loaderを指定する。

module: {
  rules: [
    {
      test: /\.js$/,
      use: [
        {
          loader: 'babel-loader'
        }
      ]
    }
  ]
}

.babelrcというファイルを作成する。

project(作業ディレクトリ)
 |-.babelrc
 |-package.json
 |-webpack.config.js
 |-dist
 |  |-build.js
 |  |-index.html
 |
 |-src
 |  |-index.js

presetsの設定でECMAScriptのバージョンをトランスパイルする。
envと指定したので、ECMASCript2017をECMAScript5に変換できる。

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

Reactを導入する場合

普段Reactを使っているので、Reactの導入を行いたい場合は、babel-preset-react, react, react-domを追加する。

yarn add babel-preset-react --dev
yarn add react react-dom

webpack.config.jsに設定を追加する。
node_modulesをBabelのトランスパイル対象から外す。
reactやreact-domをトランスパイルするのを避けるため。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
          }
        ],
        exclude: /node_modules/,
      }
    ]
  }
};

.babelrcのpresetsにreactを追加する。

{
  "presets": [
    "react",
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

最後に

以上で最低限、webpack + babelでの設定はできるかと思う。
あとは、モジュールの追加や設定を必要に応じて行ったら良さそう。

参考

webpack公式
Babel公式
最新版で学ぶwebpack 3入門 – BabelでES2017環境の構築

21
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
senou

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
21
Help us understand the problem. What is going on with this article?