1.product模式下,新增版本号:
1)common.js文件中,输出的文件路径要跟着变化 output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, '../dist/'+config.version+'/'),
publicPath: config.publicPath + '/'+config.version+'/',
}, 2) 插件中的html也要修改html的路径
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
filename: path.resolve(__dirname, '../dist/index.html'),
}), 3) production文件
const config = require('../package.json');
let vendorVersion = config.vendorVersion? config.vendorVersion :'';
插件中新增
new CopyWebpackPlugin([ //文件复制到打包的 dist/lib 文件夹下
{ from: path.join(__dirname, "../static/libVendor.dll.js"), to: path.join(__dirname, "../dist/"+vendorVersion+"/lib/libVendor.dll.js") }
]),
new htmlWebpackIncludeAssetsPlugin({ //这个插件是把vue.dll.js 插入到 html 中
assets:[vendorVersion+'/lib/libVendor.dll.js'],
publicPath:config.publicPath,
append:false
}), --------------------
2. dev模式下
common.js 文件
1) 输出文件的公共路径改为跟路径:/
output.publicPath:'/'
2) 插件中去掉 filename
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
//filename: path.resolve(__dirname, '../dist/index.html'),
}),
因为webpack-dev-server 走的是内存中的代码,设置html模版即可,不要设置filename(即输出路径),
否则找不到html; //注意:
  htmlWebpackIncludeAssetsPlugin要放在 HtmlWebpackPlugin插件的后面
 注意在dev或production中 插件 HtmlWebpackPlugin 都要放在其他插件前面,否则报错!!
  new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.html'),
   }),

webpack脚手架增加版本号的更多相关文章

  1. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  2. 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  3. Egret版本更新(H5增加版本号)

    由于浏览器缓存问题.在服务器上更新了新的图片等资源以后,客户端并不会下载最新的. 关于浏览器缓存机制,可自行百度. Egret中资源更新解决方案有以下: 一 资源名后增加版本号 二 重写Egret引擎 ...

  4. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  5. Vue.js 在 webpack 脚手架中使用 cssnext

    Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...

  6. 从0开始搭建vue+webpack脚手架(一)

    基于多数情况下都是使用vue-cli初始化项目, 却始终未去了解其原理.从零开始搭建,可以让自己更深层次的理解框架. 首先从最基本的npm 开始, 至于安装npm 和 node就不用再赘述了,那是前端 ...

  7. 极简版 react+webpack 脚手架

    目录结构 asset/ css/ img/ src/ entry.js ------------------------ 入口文件 .babelrc index.html package.json w ...

  8. webpack脚手架搭建(简单版)

    运行命令 安装依赖:npm install 运行项目:npm start 大致流程 npm init:新建 package.json 将需要的依赖模块加入 dependencies(生产环境) 和 d ...

  9. webpack简单修改版本号(单页面)

    写了一个js文件,可以尽量最简单的修改版本号 package.json配置: updateV.js放置位置: updateV.js: var fs = require('fs'); //文件读写 va ...

随机推荐

  1. 【并行计算-CUDA开发】【视频开发】ffmpeg Nvidia硬件加速总结

    2017年5月25日 0. 概述 FFmpeg可通过Nvidia的GPU进行加速,其中高层接口是通过Video Codec SDK来实现GPU资源的调用.Video Codec SDK包含完整的的高性 ...

  2. Google Adsense(谷歌网站联盟)广告申请指南

    Google AdSense 是一种获取收入的快速简便的方法,适合于各种规模的网站发布商.它可以在网站的内容网页上展示相关性较高的 Google 广告,并且这些广告不会过分夸张醒目.由于所展示的广告同 ...

  3. SpringBoot系列教程web篇之全局异常处理

    当我们的后端应用出现异常时,通常会将异常状况包装之后再返回给调用方或者前端,在实际的项目中,不可能对每一个地方都做好异常处理,再优雅的代码也可能抛出异常,那么在 Spring 项目中,可以怎样优雅的处 ...

  4. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  5. C# 拷贝文件夹到指定文件夹并更改文件夹名称

    using System; using System.Collections.Generic; using System.Text; namespace ClientPrintServer.Tools ...

  6. codeforces --- Round #250 (Div. 2) B. The Child and Set

    <传送门> [题目大意] 给你一个sum和一个limit,现在要你在1~limit中找到一些数来使得这些数的和等于sum,如果能找到的话就输出找到的数的个数和这些数,未找到输出" ...

  7. Java自学-控制流程 for

    Java的for循环 for循环,和while一样,只是表达方式不一样 示例 1 : for 比较for和while public class HelloWorld { public static v ...

  8. Python基础知识(八)----文件操作

    文件操作 一丶文件操作初识 ###f=open('文件名','模式',编码): #open() # 调用操作系统打开文件 #mode #对文件的操作方式 #encoding # 文件的编码格式 存储编 ...

  9. catch socket error

    whois_handler.dart import 'dart:io'; import 'package:async/async.dart'; import 'dart:convert'; class ...

  10. 【转载】C#中List集合使用LastIndexOf判断元素最后一次出现的索引位置

    在C#的List集合操作中,有时候需要判断元素对象在List集合中第一次出现的索引位置信息,此时需要使用到List集合的IndexOf方法来判断,如果元素存在List集合中,则IndexOf方法返回所 ...