在使用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. cf862d 交互式二分

    /* 二分搜索出一个01段或10即可 先用n个0确定1的个数num 然后测试区间[l,mid]是否全是0或全是1 如果是,则l=mid,否则r=mid,直到l+1==r 然后再测试l是1还是r是1 如 ...

  2. LoadRunner JAVA Vuser接口测试

    注:JDK只支持1.6 1.创建工程Test2.写个经典的HelloWorld类.3.Runas--->Java Application运行下4.将工程下的整个com包拷贝到loadrunner ...

  3. 步步為營-97-MyMVC3

    說明: 解決另外一個不合理之處:通過控制器完成處理 1:在mvc文件夾下面添加一個工廠類文件DefaultControllerFactory 1.2進一步升級為抽象工廠 2 下一步如何規範Contro ...

  4. python 装饰器--对有无参数的函数进行装饰

    # 使用装饰器无参数的函数进行装饰# def func(funcionName): # print('-----1------') # def func_in(): # print('--func_i ...

  5. C#正则Groups高级使用方法

    正则表达式号称开发者得瑞士军刀,使用好正则表达式尤其重要. 拆分多个正则: public static string[] SplitByManyRegex(string text, string[] ...

  6. 解决notepad++64位没有plugin manager的问题

    安装了最新的notepad++版本发现没有插件管理器,很难受. 后来上官网发现了这样一句话 Note that the most of plugins (including Plugin Manage ...

  7. jexus linux x64 [专业版] 安装和配置https

    一.环境 操作系统:centOs7-x64 二.准备工作 购买SSL/TLS证书 三.部署 1.首先查看“/lib”或“/usr/lib”等系统库文件夹中是否有SSL库文件的名字,该文件名应该是“li ...

  8. DevExpress中的GridControl控件设置了列Readonly后,想双击弹出明细的实现

    OptionsBehavior.Editable = true时,会有二个对象触发事件:view触发ShownEditor 事件(第一单击时)和内置编辑器的DoubleClick事件所以必须处理这二个 ...

  9. Caused by: java.net.ConnectException: Connection refused: master/192.168.3.129:7077

    1:启动Spark Shell,spark-shell是Spark自带的交互式Shell程序,方便用户进行交互式编程,用户可以在该命令行下用scala编写spark程序. 启动Spark Shell, ...

  10. delphi TreeView 从数据库添加节点的四种方法

    方法一:delphi中递归算法构建treeView 过程:通过读取数据库中table1的数据,来构建一颗树.table1有两个字段:ID,preID,即当前结点标志和父结点标志.所以整个树的表示为父母 ...