vue 使用webpack打包，怎么生成单个的页面

Question

我们现在的项目，打包之后生成一个index.html入口文件，因为这个入口文件引用的js太多，现在我想打包之后生成两个入口文件，不同入口文件引用不同的js怎么实现

Answer 1

老哥 Webpack多页面配置 了解一下，配置多个 Entry

Answer 2

如果用的vue-cli构建的化，很简单
官网 配置多页面

// 这是经常用到的，有可能会出现多个页面
const multiple = {
    index: {
        // page 的入口
        entry: 'src/views/index.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        // 当使用 title 选项时，
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        title: 'vipbic专注前端开发、网址导航、学习下载综合网站',
        // 在这个页面中包含的块，默认情况下会包含
        // 提取出来的通用 chunk 和 vendor chunk。
        chunks: ['index']
    },
    down: {
        entry: 'src/views/down.js', // 入口页面
        title: '学习路径',
        chunks: ['down']
    },
    set: {
        entry: 'src/views/set.js', // 入口页面
        title: '个人资料',
        chunks: ['set']
    }
};

const entry = {};

// 循环配置
Object.keys(multiple).forEach((value) => {
    if (!multiple[value].template) {
        multiple[value].template = 'public/index.html'
    }
    multiple[value].filename = `${value}.html`
    if (multiple[value].chunks.length) {
        multiple[value].chunks = [...new Set(['chunk-vendors', 'chunk-common'].concat(multiple[value].chunks))]
    }
    entry[value] = multiple[value];
});

module.exports = {
    pages: entry,
}