在使用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. jquery_ajax 跨域

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. CentOS 7 防火墙,端口开启命令

    1.  查看已打开的端口  # netstat -anp 2. 查看想开的端口是否已开 # firewall-cmd --query-port=8003/tcp   若此提示 FirewallD is ...

  3. (批量更新)对多个符合条件的id做更新操作

    需求描述:把checkbox勾选的对应id的记录的标志位置1或0,这个其实不难的,不过我自己做的话,肯定是多次访问数据库做更新,看了老大的代码,发现差距不是一般的大,老大把sql灵活运用,结果一次访问 ...

  4. 【python】ftp连接,主被动,调试等级

    示例代码如下: #!/usr/bin/env python # -*- coding: utf-8 -*- import os from ftplib import FTP def ftp_down( ...

  5. HTML&javaSkcript&CSS&jQuery&ajax(四)

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...

  6. java和python对比----实例化的对象属性:

    python 可以直接对实例化的属性进行赋值 class Test(): name = "小明" def __init__(self):{ //self.name = name; ...

  7. 拓展中国剩余定理(ex_crt)

    一般来讲,crt(中国剩余定理)比较常见,而ex_crt(拓展中国剩余定理)不是很常用 但是noi 2018偏偏考了这么个诡异的东西... 所以这里写一个ex_crt模板 模型: 求一个x满足上述方程 ...

  8. CF 494B 【Obsessive String】

    很有趣的一道题 这道题提议很难懂,其实就是让你求合法的集合数目.合法的集合定义为: 1.集合中的所有串都是s的子串,且互不重叠 2.集合中的所有串都含有子串t. 看到网上很多题解说要用kmp,但我就不 ...

  9. Nginx详解二十一:Nginx深度学习篇之配置苹果要求的openssl后台HTTPS服务

    配置苹果要求的证书: 1.服务器所有的连接使用TLS1.2以上的版本(openssl 1.0.2) 2.HTTPS证书必须使用SHA256以上哈希算法签名 3.HTTPS证书必须使用RSA2048位或 ...

  10. mac下安装Brew 警告:Warning: /usr/local/bin is not in your PATH.

    终端输入命令 export PATH=/usr/local/bin:$PATH