vue-cli之打包多入口配置
在使用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之打包多入口配置的更多相关文章
- 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)
使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...
- vue cli 3 打包过大问题
vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...
- @vue/cli 3 打包文件读取绝对路径处理
@vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...
- Vue Cli 3 打包上线 静态资源404问题解决方案
报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...
- @vue/cli 构建得项目eslint配置
如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...
- Vue Cli 3 打包上线 部署到Apache Tomcat服务器
使用 npm run build 打包项目 在根目录中有一个dist文件夹 我使用的服务器是 Apache Tomcat 把项目放进tomcat /webapps 中 启动服务器 <mac O ...
- webpack打包多入口配置
在它的entry入口设置多文件入口即可,例: entry: { core: './src/core.js', design: './src/design.js' }, 单一出口输出: output: ...
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
随机推荐
- 学习Spring Boot:(一)入门
微服务 现在微服务越来越火了,Spring Boot热度蹭蹭直升,自学下. 微服务其实是服务化思路的一种最佳实践方向,遵循SOA(面向服务的架构)的思路,各个企业在服务化治理上面的道路已经走得很远了, ...
- netstat常见基本用法(转)
netstat 简介 Netstat 是一款命令行工具,可用于列出系统上所有的网络套接字连接情况,包括 tcp, udp 以及 unix 套接字,另外它还能列出处于监听状态(即等待接入请求)的套接字. ...
- nodejs之glob与globby
glob glob允许使用规则,从而获取对应规则匹配的文件.这个glob工具基于javascript.它使用了 minimatch 库来进行匹配 安装 npm install glob 引入 cons ...
- 基于多进程的Tcp套接字服务器
服务端 import socketfrom multiprocessing import Process def task(c): print('顾客吃点啥') while True: data = ...
- 第二十单元 计划任务crond服务
什么是计划任务:后台运行,到了预定的时间就会自动执行的任务,前提是:事先手动将计划任务设定好.这就用到了crond服务 crond服务相关的软件包[root@MiWiFi-R3-srv ~]# rpm ...
- HTMLTestRunner 美化版本
前言 最近小伙伴们在学玩python,,看着那HTMLTestRunner生成的测试报告,左右看不顺眼,终觉得太丑.搜索了一圈没有找到合适的美化报告,于是忍不住自已动手进行了修改,因习惯python ...
- redis 单实例安装
单实例安装 近些年,由于内存技术的提升.造价的下降,越来越多企业的服务器内存已增加到几百G.这样的内存容量给了内存数据库一个良好的发展环境. 而使用Redis是内存数据库的一股清流,渐有洪大之势.下面 ...
- javaScript中的querySelector()与querySelectorAll()的区别
之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...
- ZOJ 3785 What day is that day?(数论:费马小定理)
What day is that day? Time Limit: 2 Seconds Memory Limit: 65536 KB It's Saturday today, what da ...
- SVN_2008R2 搭建流程与规范
Svn服务在win2008 搭建 1:svn服务的原理与架构 1.Svn服务可以理解为加强版的ftp文件服务器, svn采用HTTP协议的方式进行文件传输 2.服务端安装好后,普通用户也需要下载一个c ...