LoginSignup
46

More than 5 years have passed since last update.

とりあえず webpack を使ってみる

Last updated at Posted at 2018-02-25

webpack 最低限、超入門。
細かい説明は抜きにして、とりあえず webpack を触ってみたいひと向け。
「webpack」で調べてみると説明が長い記事が多く、全体の流れを理解しにくかったので、短くまとめてみました。

1. そもそも webpack とは何か

js や css などを 1 つにまとめてくれるツール
→ 開発時にファイルを分割できる
→ 嬉しい

2. とりあえず動かす

2.1. インストール

webpack は Node.js のパッケージなので、Node.js を持っていない場合はインストール。
参考「とりあえず Ubuntu で新しい Node.js, npm をインストール - Qiita

以降は作業したいディレクトリでの操作。

npm init -y # package.json の作成。-y を付けると対話が出ない
npm install --save-dev webpack
npm install --save-dev webpack-cli # (webpack 3 以前では不要)

2.2. ファイル編集

作成された package.json"scripts" を以下のように編集。

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

参考「package.json | npm Documentation
参考「npm package.json 日本語版 取扱説明書

2.3. ファイル追加

実際のソースコードを追加。
(ここでは分かりやすいよう js ファイル 1 つ)

dist/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>だぁ!</title>
    <script src="./main.js"></script>
  </head>
  <body>
  </body>
</html>
src/index.js
document.addEventListener("DOMContentLoaded", function() {
    document.write('わん♪');
    document.write('にゃー❤');
});

webpack の設定。

webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'main.js'
    }
};

参考「Configuration - webpack

2.4. ビルド

npm run build

webpack が実行され、dist/main.js ができます。

2.5. その他

あとはファイル分割したりすると嬉しい。
検索してサンプルのコードを探すと良い。

  • CommonJS require module.exports (exports)
  • ES6 import export

3. webpack 4 を使う

環境によってインストールされるバージョンが異なる場合がありますが、webpack 4 ならより便利に使えます。
※ Node 4 以下だと正しく動作しないので、古い場合は先に Node.js をバージョンアップ。

参考「次のリリースであるwebpack 4の主な変更点まとめ - 技術探し

3.1. ファイル編集

package.json
...
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
...

3.2. ファイル削除

この記事のサンプルでは webpack 4 のゼロコンフィグ時のディレクトリ構成と同じにしているので、そのまま webpack.config.js を削除してもビルドできます。

3.3. ビルド

開発時とリリース時で簡単に分けることができます。

開発時
npm run dev
リリース時
npm run build

minify の有無やその他色々便利に切り替えてくれます。

4. おまけ

4.1. webpack のバージョンを調べる

npm 5.1 まで (それ以降でも使える)
$(npm bin)/webpack -v
npm 5.2 から
npx webpack -v

4.2. Babel の導入

webpack と Babel を同時に説明すると分かりにくい気がしたので、別記事にしました。

参考「とりあえず webpack 4 で Babel 6 か 7 を導入する - Qiita

4.3. ディレクトリ構成

src に html なども含めたい場合にはサブディレクトリ js, html などを作るべきかも。

サブディレクトリを webpack.config.js で指定する際は path.join, path.resolve, + などで __dirname につなげる (output.path は相対パスで指定しない) 。
webpack 4 だとコマンドライン引数から色々設定できるようです。

4.4. package.json

本当は必須は "name""version"
ただし、webpack を使う分には "scripts""devDependencies" さえあれば動く。
("main": "index.js", も不要)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46