叉烧店并不卖叉烧

webpack打包多个入口起点

webpack TTT 212℃ 0评论

参考 参考2

webpack打包多个入口起点

之前都是打包一个入口起点,现在对多个入口起点进行打包,以下示例是打包两个入口起点,更多的话以此类推

项目结构如下

webpack.config.js

const VueLoaderPlugin = require("vue-loader/lib/plugin");
 
module.exports = {
    entry: {
        index: __dirname + "/app/index.js",
        childIndex: __dirname + "/app/child-index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name].js"  // 将以原本的的入口文件名称命名
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

ChildApp.vue

<template>
    <div class="test3">
        <p>I am ChildApp.vue</p>
        <p><a href="child-index.html">to child index</a></p>
    </div>
</template>

App.vue

<template>
    <div class="test2">
        <p>I am App.vue</p>
        <ChildApp/>
    </div>
</template>
 
<script>
import ChildApp from "./components/ChildApp.vue";
 
export default {
	components: {
		ChildApp
	}
}
</script>

child-index.js

import Vue from "vue/dist/vue.js"
import ChildIndexApp from "./ChildIndexApp.vue"

new Vue({
    el: "#childIndex",
    template: "<ChildIndexApp/>",
    components: {ChildIndexApp}
})

ChildIndexApp.vue

<template>
    <div>
        <p>Hi, I am ChildIndexApp</p>
    </div>
</template>

index.js

import Vue from "vue/dist/vue.js";
import App from "./App.vue";
 
new Vue({
    el: "#root",
    template: '<App id="test"/>',
    components: {App}
})

转载请注明:叉烧店 » webpack打包多个入口起点

喜欢 (0)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址