Vue.js/開発/webpack/複数の entry を指定

画面が1個しか無いなら entry は1つでいいかもしれない。 entry が一つということは出力も一つということである。

しかし、それでは関係ない機能や画面ごと固有の動きに対応できない。なので複数の entry が欲しい場合がある。複数の entry があるということは出来上がる出力も複数あるということである。

それには splitChunks という機能を使うことになるようだ。

※↑のように書いたが、よくよく考えれば webpack.config.js をたくさん用意したほうがスマートだと思う。

複数の vue コンポーネントを作る

このようなファイル

<template>

<div>{{ say }}</div>

</template>




<script>

export default {
    data: function(){
        return {
            say: "HelloHoge"
        };
    }
}
</script>

ほぼ全部同じで return 部分だけ違うファイルを

Hoge.vue
Piyo.vue
Fuga.vue
Moge.vue

と用意する。Moge.vue は共通依存という位置づけ

entry の JS ファイルを複数用意

中の依存性はファイルごとに違う。

import Vue from "vue"
import Hoge from "./Hoge.vue"
import Moge from "./Moge.vue"
 
document.addEventListener("DOMContentLoaded", () => {
    new Vue({
        el: "#app1",
        render: a => a(Hoge)
    });
    new Vue({
        el: "#app2",
        render: a => a(Moge)
    });
});

このような感じ app1 側が違っていて app2 は全部同じな entry を

hoge.js
piyo.js
fuga.js

と作る。

webpack.confing.js の設定

splitChunks を使うように記述する。

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path');
 
module.exports = {
    entry: {
        hoge: "./src/hoge.js",
        piyo: "./src/piyo.js",
        fuga: "./src/fuga.js"
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, 'dist')
    },
    optimization: {
        splitChunks: {
            name: 'vendor',
            chunks: 'initial'
        }
    },
    module: {
        rules:[{
            test: /\.vue$/,
            loader: "vue-loader"
        }]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

entry をキー付きで3つ指定している。

output 指定する。 filename の部分の [name] は entry のキーと対応していて

hoge.bundle.js
piyo.bundle.js
fuga.bundle.js

というファイルを生成する指定となる。path はそのままで出力ディレクトリ

共通部分である moge はどこに行くかと言うと、splitChunks の指定で、vendor となっているので、 ``vendor.bundle.js`` となる。chunks は分割部分をどう読み込むかの指定だが initial で静的に読み込む。

これができればビルドする。

読み込む

それぞれを読み込む

hoge.html
piyo.html
fuga.html

を作る。ここは webpack とは無関係である。想定としてはこのhtmlの生成を Spring Boot の Thymeleaf に任せる。

内容はこんな感じで script のとこだけちょっとずつ違うやつを作る

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hoge</title>
    <script src="vendor.bundle.js"></script>
    <script src="hoge.bundle.js"></script>
</head>
<body>
    <div id="app1"></div>
    <div id="app2"></div>
</body>
</html>

そしてブラウザで開いて

HelloHoge
HelloMoge

HelloPiyo
HelloMoge

HelloFuga
HelloMoge

と表示されれば OK

javascript/vuejs/dev/webpack/multi_entries.txt · 最終更新: 2018-11-27 16:32 by ore

文書の先頭へ

Vue.js/開発/webpack/複数の entry を指定

menu

書いてる野郎

Vue.js/開発/webpack/複数の entry を指定

複数の vue コンポーネントを作る

entry の JS ファイルを複数用意

webpack.confing.js の設定

読み込む