在使用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. Confluence 6 MySQL 3.x 字符集编码问题

    MySQL 3.x is 已知在大写和小写转换的时候有些问题(non-ASCII). 问题诊断 请按照 Troubleshooting Character Encodings 页面中的内容对问题进行诊 ...

  2. Confluence 6 查看空间活动需要注意的地方

    希望查看空间的活动情况,Confluence Usage Stats  插件必须在系统中启用.这个插件启用的话将会导致系统的性能问题.针对大型的 Confluence 站点,这个插件在默认情况下是禁用 ...

  3. Confluence 6 用户目录图例 - 和 Jira 连接到 Crowd

      上面的图:Confluence, JIRA 和其他应用程序连接到 Crowd 作为用户管理. https://www.cwiki.us/display/CONF6EN/User+Managemen ...

  4. Redis简介与安装

    目录 Redis概述与安装使用 Redis概述与安装使用 Author:SimpleWu GitHub-redis Redis简介 Redis英语全称:( REmote DIctionary Serv ...

  5. 《剑指offer》 链表中倒数第k个节点

    本题来自<剑指offer> 链表中倒数第k个节点 题目: 输入一个链表,输出该链表中倒数第k个结点. 思路: 倒数第k个节点,而且只能访问一遍链表,定义两个节点,两者之间相差k个距离,遍历 ...

  6. 如何在PDF中添加水印,PDF添加水印技巧

    PDF文件现在的使用很是普遍,不管是工作中还是学习中都会使用到PDF文件,制作一个PDF文件就很辛苦的,我们要是想把PDF文件中添加水印防止抄袭的时候应该要怎么做呢,其实吧PDF文件添加水印还挺简单的 ...

  7. HTML&javaSkcript&CSS&jQuery&ajax(11)

    1.localStorage 没有 时间的限制数据存储, sessionStorage 针对一个session的存储,首先检查浏览器是否支持对这两个的存储, ifI(type(Storage)!==& ...

  8. CF1065D

    如果不喜欢过长代码的看官,请移步其他题解... 这题其实思想极其简单: 棋盘问题常见的算法都比较暴力,常用的有搜索和状压dp 而这道题显然没啥能状压的,所以我们考虑搜索 但是仅仅搜索是不够的,因为有极 ...

  9. axure—日期函数

    日期函数 日期函数中实现倒计时的关键点:1)gettime()函数可以取到1970年1月1日的时间,我们用倒计时结束的时间减去当前时间就能得到倒计时需要循环显示的所有时间.2)此处的“d”是倒计时结束 ...

  10. C++ Primer 笔记——嵌套类 局部类

    1.嵌套类是一个独立的类,与外层类基本没什么关系.特别的是,外层类的对象和嵌套类的对象是相互独立的.在嵌套类的对象中不包含任何外层类定义的成员,在外层类的对象中也不包含任何嵌套类定义的成员. 2.嵌套 ...