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 入门讲解1
Apr 15 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
JS实现简易日历效果
Jan 25 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
vue实现虚拟列表功能的代码
2020/07/28 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python如何获取系统iops示例代码
2016/09/06 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python如何删除文件、目录
2020/06/23 Python
行政管理人员精品工作推荐信
2013/11/04 职场文书
高一英语教学反思
2014/01/22 职场文书
婚礼主持词开场白
2014/03/13 职场文书
优秀广告词大全
2014/03/19 职场文书
群众路线对照检查材料
2014/09/22 职场文书
司机个人年终总结
2015/03/03 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
muduo TcpServer模块源码分析
2022/04/26 Redis
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers