レガシーなJavaScriptの構成をwebpack4を使ってまとめる
後述するような形で構成しているWebページがあり、今のままだとファイルの更新はまだ良いのですが、新しいファイルの追加を行う場合にHTMLファイルにscriptタグを追加する作業が必要になってしまうため、
せめてJavaScript部分だけでもなるべく工数をかけずに１つのファイルにまとめたいと思い
調べてみました。
bundleする以前の構成
- index.html
- assets/js/foo.js
- assets/js/bar.js
- assets/js/hoge.js
- assets/js/main.js
HTML
index.html
<html>
<head>
<!-- 省略 -->
</head>
<body>
<!-- 省略 -->
<script src="assets/js/foo.js"></script>
<script src="assets/js/bar.js"></script>
<script src="assets/js/hoge.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
JavaScript
assets/js/foo.js
var Foo = function() {
this.name = 'foo'
}
assets/js/bar.js
var Bar = function() {
this.name = 'bar'
}
assets/js/hoge.js
var Hoge = function(foo, bar) {
this.call = function() {
console.log(foo.name)
console.log(bar.name)
}
}
assets/js/main.js
var hoge = new Hoge(new Foo, new Bar)
hoge.call()
bundleするために必要なこと
- 各モジュールを
module.exoportsを使用してエクスポートする -
assets/js/main.jsファイル内でrequire()を使用して各モジュールを読み込む
各モジュールをmodule.exoportsを使用してエクスポートする
作成したモジュール名(function名)をexportsする
assets/js/foo.js
var Foo = function() {
// 省略
}
+ module.exports = Foo
assets/js/bar.js
var Bar = function() {
// 省略
}
+ module.exports = Bar
assets/js/hoge.js
var Hoge = function() {
// 省略
}
+ module.exports = Hoge
assets/js/main.jsファイル内で各モジュールを読み込む
require()を使用し、<script>タグで読み込んでいたファイルを読み込む
assets/js/main.js
+ var Foo = require('./foo.js')
+ var Bar = require('./bar.js')
+ var Hoge = require('./hoge.js')
var hoge = new Hoge(new Foo, new Bar)
hoge.call()
HTML内の<script>タグを利用して読み込んでいた各モジュール削除し、bundle後のJavaScriptファイルのみ読み込むようにする
index.html
<html>
<head>
<!-- 省略 -->
</head>
<body>
<!-- 省略 -->
- <script src="assets/js/foo.js"></script>
- <script src="assets/js/bar.js"></script>
- <script src="assets/js/hoge.js"></script>
- <script src="assets/js/main.js"></script>
+ <script src="assets/dist/bundle.js"></script>
</body>
</html>
bundleする
コンフィグファイルの編集
webpack.config.js
const path = require('path');
module.exports = {
entry: './assets/js/main.js',
output: {
path: path.resolve(__dirname, 'assets/dist'),
filename: 'bundle.js'
}
};
webpackの実行
webpackのインストールとスクリプトの設定
package.json
{
// ...省略...
"scripts": {
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"webpack": "^4.41.2"
},
"dependencies": {
"webpack-cli": "^3.3.10"
}
}
実行結果
$ yarn build
yarn run v1.15.2
$ webpack --config webpack.config.js
Hash: 0e4f3138f1f49f11d380
Version: webpack 4.41.2
Time: 361ms
Built at: 2019-12-14 17:28:28
Asset Size Chunks Chunk Names
bundle.js 1.16 KiB 0 [emitted] main
Entrypoint main = bundle.js
[0] ./assets/js/main.js 142 bytes {0} [built]
[1] ./assets/js/foo.js 65 bytes {0} [built]
[2] ./assets/js/bar.js 65 bytes {0} [built]
[3] ./assets/js/hoge.js 138 bytes {0} [built]
✨ Done in 1.98s.
以上です。
やり方が間違っていたり、もっと良い方法がありましたらご教示ください。