Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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", も不要)

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした