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:@ ...
随机推荐
- automaticallyAdjustsScrollViewInsets 详解
automaticallyAdjustsScrollViewInsets 自动缩进 20 像素 默认是 True 项目中如果有UIViewController 和ScrollView 一般都要设置成f ...
- python Requests 的一些高级特性
会话对象 会话对象让你能够跨请求保持某些参数.它也会在同一个 Session 实例发出的所有请求之间保持 cookie, 期间使用 urllib3 的 connection pooling 功能.所以 ...
- Spring Cloud Eureka简介及原理
Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Spring Cloud将它集成在其子项目spring-cloud-netflix中,以实现Spring Cloud的服务 ...
- Python语音识别(计算器)
第一步关于导入模块的事,我试了好几个方法才发现在好像win7系统没有语音识别功能,我用了win10的又需要重新下载一个包 这样子,win32com.client模块就可以使用了 import win3 ...
- windows下KafkaOffsetMonitor下载及安装
KafkaOffsetMonitor是一个可视化工具的jar包,如KafkaOffsetMonitor-assembly-0.2.1.jar,用来来监控kafka的使用状态. 一.下载地址 https ...
- UEditor上传自定义文件夹
需求:使用UEditor上传时需要知道具体到哪个章节得图片,所以得根据Session中得文件重新定义 修改Handler类: public HttpSessionState Session {get; ...
- 最小生成树模板【kruskal & prim】
CDOJ 1966 Kruskal 解法 时间复杂度O(mlogm) m为边数,这里主要是边排序占时间,后面并查集还好 #include <cstdio> #include <cst ...
- 【Android】setHapticFeedbackEnabled 设置
使其在触摸的时候没有触感反馈.接着设置长按事件的监听. 代码在:launcher launcher->setupViews方法 // Setup the workspacemWorkspace. ...
- Python_shutil模块
import shutil 高级的文件,文件夹,压缩包的处理模块,也主要用于文件的拷贝 shutil.copyfileobj(fsrc,fdst[,length]): 将文件的内容拷贝到另一个文件(可 ...
- Android ADB命令 adb devices 出现error:protocol fault (no status)
问题背景:安装apk是报error:protocol fault<no status>或error:device not found手机驱动有问题 出现的问题如下:adb devices ...