在使用vue-cli初始化vue项目时,默认打包为单入口,有时候一个项目可能会有不同入口,在这种情况下,就需要我们稍微修改下webpack配置文件了,具体步骤如下:

  1、修改webpack.base.config.js单入口改为多入口 

 entry: {
app: ["babel-polyfill", './src/main.js'],
test: ['./src/test.js']
},

  2、在不同环境的webpack配置文件中增加HtmlWebpackPlugin配置(如webpack.prod.config.js)

  new HtmlWebpackPlugin({
filename: 'test.html',
template: 'test.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunks: ['test']
}),

  chunks中文意思为块,对应的名称是打包入口,不配置该属性会引用配置的所有entry。如下配置打包后的结果如下图:

  打包结果:

  test.html

  index.html

参考资料:https://www.npmjs.com/package/html-webpack-plugin

vue-cli之打包多入口配置的更多相关文章

  1. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  2. vue cli 3 打包过大问题

    vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...

  3. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

  4. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

  5. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  6. Vue Cli 3 打包上线 部署到Apache Tomcat服务器

    使用 npm run build 打包项目 在根目录中有一个dist文件夹 我使用的服务器是 Apache  Tomcat 把项目放进tomcat /webapps 中 启动服务器 <mac O ...

  7. webpack打包多入口配置

    在它的entry入口设置多文件入口即可,例: entry: { core: './src/core.js', design: './src/design.js' }, 单一出口输出: output: ...

  8. @vue/cli 构建得项目eslint配置2

    使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...

  9. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

随机推荐

  1. cf869C组合计数问题

    如果在两个区域里连点,两个区域内选的点数一定要相等 即a中选出i个点,必须与b中选出i个点相连 连接种类数为  然后我们再来看,如果ab中有两点相连,其中一点再与c相连会出事吗? 很显然不会对答案产生 ...

  2. CentOS下将Python的版本升级为3.x

    本文主要介绍在Linux(CentOS)下将Python的版本升级为3.x的方法 众所周知,在2020年python官方将不再支持2.7版本的python,所以使用3.x版本的python是必要的,但 ...

  3. 监控CPU使用率并发送报警邮件

    #!/bin/bash DATE=$(date +%F" "%H:%M) #只支持centos6 IP=$(ifconfig eth0 | awk -F '[ :]+' '/ine ...

  4. 论文阅读笔记十二:Encoder-Decoder with Atrous Separable Convolution for Semantic Image Segmentation(DeepLabv3+)(CVPR2018)

    论文链接:https://arxiv.org/abs/1802.02611 tensorflow 官方实现: https: //github.com/tensorflow/models/tree/ma ...

  5. 饮冰三年-人工智能-linux-05 Linux进程

    1:top 命令,查看cpu使用情况.(由于top是实时刷新,占用内存比较大) P:按照cpu使用率降序排列 M:按照内存使用率降序排列 2:free 命令,查看内存使用情况 free -m 以M为单 ...

  6. 步步為營-95-MyMVC 1.0

    說明:通過自己編寫MyMVC以便於對MVC內容實現機制有更深刻的認識 1.1:創建MyMVC項目,刪除無關引用,只保留system 和 system.web.同時該項目中以後添加一些文件后也要刪除無關 ...

  7. POJ 2001 Shortest Prefixes(字典树活用)

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 21651   Accepted: 927 ...

  8. 20165206 2017-2018-2 《Java程序设计》第8周学习总结

    20165206 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 进程:进程是程序的一次动态执行过程,对应了从代码加载.执行至执行完毕的一个完整过程,这个过程 ...

  9. 5分钟了解swagger

    5分钟了解swagger https://blog.csdn.net/i6448038/article/details/77622977 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变 ...

  10. 【第一部分】01Leetcode刷题

    一.二叉树的中序遍历 题目:94. 二叉树的中序遍历.94. Binary Tree Inorder Traversal 解法一: class Solution { public: vector< ...