vue-cli3中配置alias和打包加hash值操作


Posted in Javascript onSeptember 04, 2020

1.之前在项目测试环境打包的时候,js文件打包出来没有hash值,但是生产环境打包出来却又hash值

当时只配置了 filenameHashing: true,这样是不够的

后来在chainWebpack中配置config.output.filename('[name].[hash].js').end(),解决了该问题

2.配置alias可以在引入文件的时候不用写很长的相对路径

步骤:

先引入path模块

const path = require('path') 
function resolve(dir) {
 return path.join(__dirname, dir)
}

之后在chainWebpack中设置

chainWebpack(config) {
 
  config.resolve.alias
   .set('style', resolve('public/style'))
   .set('api', resolve('src/api'))
   .set('tools', resolve('src/tools'))
   .set('components', resolve('src/components'))
   .set('echarts', resolve('src/echarts'))
   .set('echarts', resolve('node_modules/echarts'))
 
  config.output.filename('[name].[hash].js').end();
 },

补充知识:以vue-cli为例,了解webpack的hash、chunkhash、contenthash

hash

[hash] is replaced by the hash of the compilation(). 代表的是cpmpilation的hash。

compilation在项目中任何一个文件改动后就会被重新创建,然后webpack计算新的compilation的hash值,这个hash值便是hash。

chunkhash

[chunkhash] is replaced by the hash of the chunk. chunk(模块)的hash

代表的是chunk(模块)的hash值。

contenthash

插件extract-text-webpack-plugin引入的contenthash

名称 说明
hash 代表的是compilation的hash值。compilation在项目中任何一个文件改动后就会被重新创建,然后webpack计算新的compilation的hash值
chunkhash 代表chunk的hash,模块发生改变才会重新生成hash
contenthash 解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-plugin单独编译输出css文件)

vue-cli举例

vue-cli脚手架中webpack的配置文件hash, build/webpack.base.conf.js

vue-cli中,hash用于图片,音视频,和字体文件

// hash(hash,jpg,mo4,txt)
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
})
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

chunkhash,build/webpack.prod.conf.js

chuunkhash主要用于js文件中

// chunkhash,js
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

contenthash:build/webpack.prod.conf.js

使用extract-text-webpack-plugin单独编译输出css文件。extract-text-webpack-plugin提供了另外一种hash值:contenthash

// extract css into its own file
  new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css')
  }),

至于缓存这一大块的内容,路漫漫,继续学习

以上这篇vue-cli3中配置alias和打包加hash值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 #Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 #Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 #Javascript
在vue中axios设置timeout超时的操作
Sep 04 #Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 #Javascript
JavaScript中的执行环境和作用域链
Sep 04 #Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 #Javascript
You might like
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
常用PHP封装分页工具类
2017/01/14 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue router demo详解
2017/10/13 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
python字典排序的方法
2019/10/12 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Python实现汇率转换操作
2020/05/03 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
中层干部岗位职责
2013/12/18 职场文书
社团活动总结报告
2014/06/27 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python