■Webpackの導入（JSファイルをまとめるまで）
モジュールバンドラーと呼ばれるもので、JSファイルをまとめるツール
ファイルをまとめる処理を自動で行うこともできるため、タスクランナーと似たような位置づけでもある
はじめてのWebpack - Qiita
https://qiita.com/cheez921/items/266b1b4534b6111a9686
最新版で学ぶwebpack 3入門(図解付き) - JS開発で必須のモジュールバンドラー - ICS MEDIA
https://ics.media/entry/12140
webpack 入門 （v3系 対応） - Qiita
https://qiita.com/soarflat/items/28bf799f7e0335b68186
すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ｜note
https://note.mu/konpyu/n/n694491cd9e80
WebpackがいいのかGulpがいいのかはよく考えたい
WebpackはJavaScriptのみを扱い、GulpでSASSや画像を扱う…という手法も多い
Gruntは滅びゆく技術になっているようなので避ける方が無難
【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう | WEBA
https://hirata.blog/201712_taskrunner/
webpackの開発は、事実上終了しているらしい
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る − Publickey
https://www.publickey1.jp/blog/23/javascriptwebpackturbopack.html
2022年6月にIEが終了したので、以下のような意見もある
IEが終了したので、webpackやbabelは不要？ - Qiita
https://qiita.com/access3151fq/items/42b38635d81aad786e60
■導入
Node.jsは、Electronなど他ツールインストール時に導入済み
>node -v
v6.5.0
C:\Users\refirio\webpack-test を作成しておく
以降、webpack-test を作業フォルダとする
>cd C:\Users\refirio\webpack-test
>npm init -y
package.json が作成される。作成された内容は以下の通り
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
以下のコマンドでインストール
>npm install -D webpack
node_modules フォルダが作成され、その中に必要なファイルが作成される
（「-D」は「--save-dev」の略）
package.json に scripts を追加する
この時点で以下のようになっている
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^3.10.0"
}
}
■JSファイルをまとめる
テストプログラムを作成する
js/main.js
// import 文を使って sub.js ファイルを読み込む。
import {hello} from './sub';
// sub.jsに定義されたJavaScriptを実行する。
hello();
js/sub.js
// export文を使ってhello関数を定義する。
export function hello() {
alert('helloメソッドが実行された。');
}
設定ファイルを作成する
webpack.config.js
module.exports = {
// メインとなるJavaScriptファイル（エントリーポイント）
entry: './js/main.js',
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: __dirname + '/js/',
// 出力ファイル名
filename: 'bundle.js'
}
};
以下で実行する
>npm run build
js/main.js と js/sub.js をもとに js/bundle.js が作成される
適当なHTMLファイル（ここでは sample.html とした）を作成し、プログラムを呼び出してみる
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack</title>
<script src="js/bundle.js"></script>
</head>
<body>
<h1>Webpack</h1>
<p>Webpackのテスト。</p>
</body>
</html>
「helloメソッドが実行された。」というアラートが表示されれば成功。
■watchモードで自動ビルド
webpack.config.js で「watch: true,」を追加するとwatchモードになり、自動でビルドされる
実行コマンドは変わらない
module.exports = {
// watchモードを有効にする
watch: true,
// メインとなるJavaScriptファイル（エントリーポイント）
entry: './js/main.js',
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: __dirname + '/js/',
// 出力ファイル名
filename: 'bundle.js'
}
};
■babelを使ってES6をコンパイル
※追加パッケージをインストール
>npm install -D babel-loader babel-core babel-preset-env
webpack.config.js にローダーの設定を追加する
これでES6で書いたコードをES5に変換してくれる
module.exports = {
// watchモードを有効にする
watch: true,
// メインとなるJavaScriptファイル（エントリーポイント）
entry: './js/main.js',
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: __dirname + '/js/',
// 出力ファイル名
filename: 'bundle.js'
},
// ローダーの設定
module: {
rules: [{
// ローダーの処理対象ファイル
test: /\.js$/,
// ローダーの処理対象から外すディレクトリ
exclude: /node_modules/,
// 利用するローダー
use: [{
loader: 'babel-loader',
options: {
presets: ['env']
}
}],
}],
},
};
■SASS、Gulp、Laravel Mix など
■SASS
WebpackでJavaScriptを扱うのは容易だが、CSSを扱うのは厄介みたい
WebpackではCSSも画像もJavaScriptに変換して1ファイルとして読み込まれる
果たしてここまですべきなのかは疑問
「脱Webpack」の時代が来たときに厄介な負債となりそう
なんとなくで理解しないWebpackのCSS周辺 - Qiita
https://qiita.com/inuscript/items/0574ab1ef358fecb55b9
webpack 3入門：スタイルシート(CSSやSass)を取り込む方法 - Qiita
https://qiita.com/clockmaker/items/8fab54c93e84001846b0
■Gulp
Webpack単体ではなく、Gulpと組み合わせて使うこともできるみたい
ただし、これならWebpackを使わずにGulpで完結させるほうが楽のような
gulpとbabelとwebpackというフロント開発３銃士 - Qiita
https://qiita.com/bakira/items/3c4e2d10aae085767817
webpack + Gulp + Babelな開発環境の作り方メモ | よしあかつき
https://yosiakatsuki.net/blog/try-webpack-gulp/
JavaScriptの変換のみにWebpackを使い、他をGulpで行う…という使い方が紹介されている
GulpではTypeScriptは使えるが、純粋なES6→ES5変換は使えない…とか？
ただし、ECMAScript2015として記述したコードは原則TypeScriptとしても実行可能らしい
Gulpで始めるwebpack 4入門 - Qiita
https://qiita.com/tonkotsuboy_com/items/2d4f3862e6d05dc0bea1
■Laravel Mix
Laravel Mixから使うのが便利らしい？
みたところ、SASSもJavaScriptではなくCSSファイルとして書き出せているみたい
（もとは Laravel-Elixir と呼ばれていた）
アセットのコンパイル(Laravel Mix) 5.5 Laravel
https://readouble.com/laravel/5.5/ja/mix.html
Laravel Elixir 5.1 Laravel
https://readouble.com/laravel/5.1/ja/elixir.html
他のフレームワークでも使える Laravel-Elixir - localdisk
http://localdisk.hatenablog.com/entry/2015/11/20/212236