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" を以下のように編集。
...
"scripts": {
"build": "webpack"
},
...
参考「package.json | npm Documentation」
参考「npm package.json 日本語版 取扱説明書」
2.3. ファイル追加
実際のソースコードを追加。
(ここでは分かりやすいよう js ファイル 1 つ)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>だぁ！</title>
<script src="./main.js"></script>
</head>
<body>
</body>
</html>
document.addEventListener("DOMContentLoaded", function() {
document.write('わん♪');
document.write('にゃー❤');
});
webpack の設定。
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'main.js'
}
};
2.4. ビルド
npm run build
webpack が実行され、dist/main.js ができます。
2.5. その他
あとはファイル分割したりすると嬉しい。
検索してサンプルのコードを探すと良い。
- CommonJS
requiremodule.exports(exports) - ES6
importexport
3. webpack 4 を使う
環境によってインストールされるバージョンが異なる場合がありますが、webpack 4 ならより便利に使えます。
※ Node 4 以下だと正しく動作しないので、古い場合は先に Node.js をバージョンアップ。
参考「次のリリースであるwebpack 4の主な変更点まとめ - 技術探し」
3.1. ファイル編集
...
"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 bin)/webpack -v
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", も不要)