はじめに
以下の記事を参考にしてます！
この記事で使っているwebpackのバージョンは４以上なので、一部古い情報から更新してます。
開発用のtwitterのアカウント作ったのでよかったらフォローしてね！twitter: @susiyaki_dev
参考
勉強のきっかけ
周りのエンジニアの会話でwebpackという単語が出てきていたが、自分だけ理解ができていないようでついていけなかった。
また、最近勉強しているVue.jsの開発では、Vue CLIが勝手に処理してくれるようだが、理解するのは大事だと思ったのでLet's study!
webpackとは
webpackの役割
- javascriptのファイルを一つにまとめる役割。
- まとめる過程で、他の設定ファイルを用いてes6やReactなどさまざまなディストリビューションで書かれたものをトランスパイルしてブラウザで閲覧可能にする。
webpackの開発経緯
開発以前のモジュールシステムには、BrowserifyやGrunt、glupを組み合わせたモジュールシステムの組み合わせがポピュラーであった。
しかし、これらは一つのファイルに結合して出力するという形式であったため、大規模開発の場合には、
- 初回アクセス時のユーザの読み込み時間が莫大になってし
まう - 少しの変更でもプロジェクト全体の処理が更新されるためキャッシュが非効率になる
と言った問題があった。
これを背景として、アクセスページに依存関係のあるコードだけが含まれるファイルを読み込むためのwebpackが開発された。
使い方
パッケージの準備
npm initでpackage.jsonの作成
npm init時の対話内容
| 質問 | 説明 |
|---|---|
| package name: (sample_webpack) | package名(default: カレントディレクトリ名) |
| version: (1.0.0) | バージョン設定 |
| description: | packageの概要説明 |
| entry point: (index.js) | 他のjsを参照するファイルの設定(default: index.js) |
| test command: | testコマンドを用いる場合入力 |
| git repository: | githubなどのリポジトリを設定する場合入力 |
| keywords: | npm公開時等に使用するキーワードの設定をする場合入力 |
| author: | npm公開時に表示される作者情報を設定する場合入力 |
| license: (ISC) | npm公開時に適用する権利情報を設定する場合入力 |
webpackの導入
npm i -D webpack webpack-cli
を実行。webpackのバージョンが4以上の場合はwebpack-cliが必要
注釈-D = --save-dev
babelのインストール
本サンプルで用いるbabelとはes6をトランスパイルするモジュール。
npm install babel-core babel-loader@7 babel-preset-es2015 -D
webpackのバージョンが４以上の場合はbabel-loader@7でバージョン指定しなきゃいけないっぽい
touch webpack.config.js
設定ファイルの編集
webpack.config.js
このファイルにwebpackコマンドを実行した際の動作を記述する。
形式はjson。
module.exports = {
entry: './index.js', // 他のjsファイルを参照しているファイル
output: {
path: __dirname + '/dist', // 出力ファイル先
filename: 'bundle.js' // 出力ファイル名
},
module: {
rules: [ // webpackのバージョンが4未満の場合は rules -> loaders
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015']
}
}
}
]
}
};
この例では、webpackコマンドを実行すると、dist/bundle.jsが生成される。
module内では、loadersで使用するモジュールとしてbabel-loaderを指定している。また、対象ファイルをtestで、除外するファイルをexcludeで指定する。
queryにはloaderに渡す引数を書く。
package.json
{
"name": "sample_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ // webpackのバージョンが4未満の場合は webpack --mode development --open -> webpack
+ "build": "webpack --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1"
}
}
使用方法
ソースファイルの準備
ディレクトリ、ファイルを作成する
touch index.html index.js
mkdir src
touch src/foo.js
内容はこんな以下の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="./dist/bundle.js"></script>
</head>
<body>
<h1>es6 example</h1>
</body>
</html>
ただのテンプレート
export const foo = 'Foo';
exportでデータを渡す。（参照可能にするデータを入れ込む)
import {foo} from './src/foo'
console.log(foo);
importでコンポーネントから利用するデータを持ってくる。
consoleに表示できれば動作確認OK
いざ実行
npm run buildでwebpack.config.jsに設定した内容に基づいてビルドしてくれる。
buildされたindex.htmlの実行結果
consoleにFooが出ている！