gulp から webpack に移行するためのメモ。
基本的にチュートリアル通りに進めていって業務で使えるように書き換えていく。
webpack インストール
$ cd /path/to/your/product
# package.json がある場合は npm init はスルー
$ npm init -y
$ npm install webpack webpack-cli --save-dev
js をビルドする
1ファイルだけ js ファイルを用意して、
public/js にビルドしてみる。
ファイル構成
ファイル構成は適当。
それっぽく配置してみた。
assets/
└ js/
└ app.js
package.json
public/
├ index.html
└ js/
webpack.config.js
assets/js/app.js
コンソールに「success」と表示させるだけ。
(function (){
console.log('success')
}())
package.json
script に webpack を追加。
これで npm run webpack で webpack コマンドを叩けるようになる。
{
...
"scripts": {
"webpack": "webpack"
},
...
}
webpack.config.js
Using a Configuration - webpack をほぼコピペ。
public/js に script.js がビルドされる。
const path = require('path')
module.exports = {
entry: './assets/js/app.js',
output: {
filename: 'script.js',
path: path.resolve(__dirname, 'public/js'),
},
}
public/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>webpack sample</title>
<script type="text/javascript" src="./js/script.js"></script>
</head>
<body>
<h1>webpack sample</h1>
</body>
</html>
ビルド
$ npm run webpack
複数の js ファイルを1つのファイルにまとめる
ついでに node_modules のファイルなどもビルドに含める。
何でもいいけど適当に moment をインストールした。
$ npm install moment --save
ファイル構成
assets/ にファイル追加。
他は構成一緒。
assets/
└ js/
├ app.js
└ models/
└ Sample.js
assets/js/models/Sample.js
適当にクラスを生成。
import moment from 'moment'
class Sample {
constructor() {
console.log(moment())
}
get() {
return moment().unix()
}
}
export default Sample
assets/js/app.js
Sample.js を読み込む。
import Sample from './models/Sample.js'
const sample = new Sample
console.log(sample.get())
console.log('success')
ビルド
$ npm run webpack
Warning を解消させる
以下 4つの Warning が出たので解消してみる。
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
script.js (290 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (290 KiB)
script.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
WARNING in configuration
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
mode を production, development, none から指定してビルドしてほしいとのこと。
config ファイルで解決する方法もあるみたいだけど、こちらは CLI で解決した。
package.json
なんとなく誤入力が嫌なので script に加えてみる。
{
...
"scripts": {
"webpack": "webpack",
"wp-prod": "webpack --mode=production",
"wp-dev": "webpack --mode=development"
}
...
}
$ npm run wp-prod
or
$ npm run wp-dev
その他 Warning
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
script.js (290 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (290 KiB)
script.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
ファイルサイズが推奨される上限のサイズより大きいとのこと。
ファイルを分割させる方法が URL 先で紹介してあった。
moment はけっこうサイズが大きく、
同じ問題に直面した記事が多かった。
その中で、 momentjs の locale を必要なものだけ呼び出す方式が紹介されていたので、
その方法を試した。
package.json
moment の locale について本家で取り扱っていた。
便利な Qiita
const webpack = require('webpack');
const path = require('path')
module.exports = {
entry: './assets/js/app.js',
output: {
filename: 'script.js',
path: path.resolve(__dirname, 'public/js'),
},
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
}),
],
}