在使用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. python之dict与set实现原理之hash算法

    理解不透彻,下回分解 http://www.cnblogs.com/pengsixiong/p/5326893.html https://blog.csdn.net/zhao_crystal/arti ...

  2. SpringMVC环境搭建

    Spring MVC为展现层提供的基于MVC设计理念的优秀Web框架,是目前最主流的MVC框架之一. Spring 3.0之后完全超越Struts2,称为最优秀的MVC框架.学完SpringMVC之后 ...

  3. vue 之webpack打包工具的使用

    一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...

  4. 【python】python为何多线程无法切换

    写了一个kafka传输消息,celery发布任务的脚本. 有四个线程,分别读取不同的kafka队列信息 问题是,只有第一个线程会启动,剩下的三个线程连start都运行不了. 而且这个问题不是一开始就发 ...

  5. RFC2119:RFC协议动词含义

    协议地址:http://www.ietf.org/rfc/rfc2119.txt MUST 必须的.通过它描述的对象,是强制要求的.它与REQUIRED和SHALL含义相同. MUST NOT 不允许 ...

  6. Java+selenium之WebDriver常见特殊情况如iframe/弹窗处理(四)

    1. iframe 的处理 查找元素必须在对应的 ifarme 中查找,否则是找不到的 // 传入参数为 frame 的序号,从0开始 driver.switchTo().frame(Int inde ...

  7. |ERROR|ERROR: missing data for column "createtime" (seg3 slice1 192.168.66.23:40001 pid=33370)之mysql换行符或者空格引起的问题

    1.最近的kettle的数据交换配置,启动kettle引起的错误,如下所示: |ERROR|ERROR: missing data pid=) 引发这个错误,并不是这个字段引起的错误,一般是这个字段临 ...

  8. [转] mongoDB与mongoose

    mongoDB简介 mongoDB与一些关系型数据库相比,它更显得轻巧.灵活,非常适合在数据规模很大.事务性不强的场合下使用.同时它也是一个对象数据库,没有表.行等概念,也没有固定的模式和结构,所有的 ...

  9. iTOP4412环境搭建:arm-linux-gcc: 没有那个文件或目录

    系统:vmware下的ubuntu14.04 对于iTOP4412自己搭建环境,在source /root/.bashrc后发现还是没有正常,调用arm-linux-gcc -v提示没有那个文件或目录 ...

  10. mysql数据类型(三)

    MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL支持所有标准S ...