webpack脚手架增加版本号

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;

原文地址:https://www.cnblogs.com/xiaozhumaopao/p/11742547.html

时间: 2024-11-05 14:44:40

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

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

由于浏览器缓存问题.在服务器上更新了新的图片等资源以后,客户端并不会下载最新的. 关于浏览器缓存机制,可自行百度. Egret中资源更新解决方案有以下: 一 资源名后增加版本号 二 重写Egret引擎加载 一 资源名后增加版本号 在default.res.json资源配置文件中,在路径后加上"ver=1.0",下次修改后,将版本号向上增加"ver=1.1". 这样每次浏览器都会下载跟新后的资源. 优点: 1 可以根据更新需求,控制到只更新某一张图片,或更新所有资源.

vue webpack 脚手架项目详细解析系列(二,项目依赖说明 package.json)

继续上一篇, 上一篇讲了 vue 的webpack脚手架的项目结构.那接下来我们看一下他的package.json 文件,看一下.他都用到了那些依赖. "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.

webpack脚手架问题

1.修改服务端口问题 "dev": "vue-cli-service serve --open --port=8888", 2.修改打包文件的文件名称(github pages默认只支持docs,这时候可以修改这个为docs "build": "vue-cli-service build --dest=docs", 3.如果打包的文件不是在域名的根目录部署 一定要修改这个参数  对应的影响文件见下边那个截图 这样将docs文件

webpack实用配置

前面的话 上文介绍了webpack入门,本文将详细介绍webpack实用配置 版本号 以entry.js打包为bundle.js为例,出口的filename可以设置为[id].[name].[hash].[chunkhash]等替换形式,如下所示 var webpack = require('webpack'); module.exports = { entry: './entry.js', //入口文件 output: { path: __dirname,//出口路径 filename: '[

webpack常用插件

webpack配置非常复杂,稍微不小心就会出错,所以现在有人笑成公司缺了个webpack配置工程师的岗位.自己配webpack确实比较繁琐,即使vue-cli给了几个现成的webpack脚手架,你不知道其中的配置项做了什么,还是容易出问题.感觉学习webpack比学习一种MVVM框架都难.其实,有一种学习思路,就是把vue-cli给出的两个脚手架配置项一个一个都用搜索引擎搞明白.现在写个总结,记录一下自己常用的一些webpack插件配置,以备今后使用. webpack.config.js有个co

为js和css文件自动添加版本号

web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服务器的压力. 但是有些时候缓存也会带来一些比较诡异的问题,呵呵.关于缓存的文章应该不在少数,不再讨论,本文的重点在于为js和css文件自动添加版本号. 这样做的原因是:首先对于js和css类型的静态文件设置了缓存机制,当文件被更新时,需要强迫浏览器下载修改后的新文件,也就是要更新缓存,而通过为js和

有趣的版本号

计算机的世界,版本号(version)无处不在,不管是发布的软件.产品,还是协议.框架.那什么是版本号呢 在这里是这样定义的: Software versioning is a way to categorize the unique states of computer software as it is developed and released. 软件版本号是对开发.发布中的软件的状态的唯一(unique)概括.简单来说,协议就是对一组状态的手工签名.作为程序员,我们经常用md5来签名,

webpack最佳入门实践系列(4)

7.使用字体 7.1.安装字体库-font-awesome 我们通过npm来安装字体 npm install font-awesome --save 这个时候,我们的package.json配置文件变成这样: { "name": "code", "version": "1.0.0", "description": "", "main": "index.js&

webpack最佳入门实践系列(07)

7.使用字体 7.1.安装字体库-font-awesome 我们通过npm来安装字体 npm install font-awesome --save 这个时候,我们的package.json配置文件变成这样: { "name": "code", "version": "1.0.0", "description": "", "main": "index.js&