webpack实现分别打包自己的js 和第三方包js,以及版本迭代浏览器缓存问题

最新推荐文章于 2024-04-27 08:39:59 发布
最新推荐文章于 2024-04-27 08:39:59 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 概念 文章标签： 关于webpack 打包和每次打包后清除缓存的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39458031/article/details/83722823
版权
  1. 使用wepack 如何处理打包自己的js文件和node_modules 引入的第三方包文件
  2. 针对自己写的js文件和第三方引入的文件实现分别打包
  3. 如何解决每次迭代浏览器缓存问题，将打包后的文件加后缀hash值，这样每次打包hash值都不一样，这样就解决浏览器的缓存问题啦
  4. 详情请看如下链接，我这也是看别人的（惭愧啊）
  5. https://www.cnblogs.com/luozhihao/p/6623819.html
坏坏的书生
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack 单独打包指定JS文件的方法
11-29
背景 最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。 CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPath: './dist/', //输出目录，index.html寻找资源的地址 path: BUILD_PATH, // 打包目录 filename: '[name].[chunkhash].js', // 输出文件名 ch
详解浏览器缓存和webpack缓存配置
01-21
浏览器缓存 浏览器缓存分为两种类型： 强缓存：也称为本地缓存，不向服务器发送请求，直接使用客户端本地缓存数据 协商缓存：也称304缓存，向服务器发送请求，由服务器判断请求文件是否发生改变。如果未发生改变...
webpack分环境打包
Cheris_LT的博客
01-07 337
第1步：安装cross-env 在项目目录下运行如下命令安装cross-env，我的ide是webstorm，要以直接在ide里的Terminal窗口中运行，也可能通过windows的CMD、Linux的Terminal定位到项目根目录运行下面的命令。 npm i --save-dev cross-env 第2步：修改各环境下的参数 在config/目录下添加test.env.js、prod.env.js。修改prod.env.js里的内容，修改后的内容如下： 'use strict' module.ex
【Vue】如何使用Webpack实现打包操作
最新发布
qq_51933234的博客
04-27 1540
其实，我觉得这个webpack打包更有意思的，把我们的源文件进行压缩后，可以直接调用或者运行。我之前玩过一段时间的小程序，当时有个人给了我一个程序代码就是打包过后的（当时自己还不知道打包这个东东），这个程序可以用小程序直接运行，但是那么代码就看不懂，让自己困惑了好一段时间。当然现在自己学的比较多，之前不同的地方来慢慢清晰了起来。为什么要说这个事呢？其实是希望在屏幕前看这篇博客的小伙伴能够不忘初心，砥砺前行。那些让你现在迷惑的，搞不懂的，终有一天，你会把所有的细节，所以的内部把内容都搞明白的！加油！各位！
如何自己实现一个Webpack
weixin_33816611的博客
04-12 464
前言 深入理解 webpack 打包机制。 模块分析 依赖环境 node.js 创建文件,最简单的字符串拼接 // index.js import { message } from './message.js' console.log(message) // message.js import { word } from './word.js' export const mess...
自己动手搭建webpack
weixin_33734785的博客
06-28 275
wepack初探 从头整理webpack搭建流程 webpack主要配置 entry：入口配置 output：输出配置 module：文件解析模块配置 plugin：插件配置 目录介绍 build/：存放webpack构建配置文件 src/：项目开发目录 public/：公共静态文件 script/：脚本文件 s...
webpack打包JS
weixin_33841503的博客
01-02 100
目录结构 使用 在根目录下输入yarn，可以看到生成node_modules目录。 在根目录下输入yarn run build，可以看到生成dist/bundle.js，这个就是打包输出的内容。 在根目录下输入yarn run dev，在浏览器输入http://localhost:8080/，可以看到控制台输出结果 3.文件解析 p...
webpack独立打包和缓存处理详解
08-30
在深入理解webpack的独立打包和缓存处理之前，首先需要回顾webpack的基础知识。webpack是一个模块打包工具，它将项目中的各种资源（如JavaScript、CSS、图片等）视为模块，通过解析依赖关系，将它们打包成一个或多个...
webpack打包js文件及部署的实现方法
10-18
Webpack 是一个流行的前端模块打包工具，它允许开发者将JavaScript、CSS、图片和其他资源组合成一个或多个优化过的静态文件，以便在Web应用中更高效地加载。本篇文章将详细介绍如何使用Webpack来打包JavaScript文件...
自己实现 webpack-shebang-plugin 插件
qq_42501092的博客
06-18 228
webpack 调试方式 webpack Compiler 和 Compilation 的区别 webpack 自定义插件
实现一个简单的Webpack
weixin_34361881的博客
06-01 197
大家好，我是神三元，今天通过一道面试题来和大家聊一聊webpack。 一、什么是Webpack 我相信，尽管很多开发者会根据官方文档进行webpack的相关配置，但仍然并不了解Webpack究竟是起什么作用的，在前端工程化扮演者什么角色，观念仍然简单地停留在“代码打包工具”上。真的是这样吗？ 让我们来看看官方定义: 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包...
实现一个简单的webpack，了解打包原理
weixin_51670675的博客
04-19 550
实现一个简单的webpack，了解webpack的打包原理
如何使用自己的webpack
m0_45114231的博客
10-04 188
前言 前端模块化编程思想是很重要的，优秀的模块化打包工具比如webpack、rollup、vite都可以用来进行模块编程。那么如何实现自己的打包工具呢？这里我们模仿webpack的底层打包思想来实现自己的打包工具。 准备 如何在全局下定义自己的打包命令以使用自己的打包工具？ 我们需要准备一个文件夹(自定义名字)，这里我以mypack命名，目录结构参考下图。 注意package.json里面的"bin"的属性值的’mypack’是命令(后面会使用npm link，然后就可以在全局下使用这个命令了) mypa
从零实现一个迷你 Webpack
LuckyWinty的博客
11-24 129
本文为来自 字节跳动-国际化电商-S项目 的文章，已授权 ELab 发布。webpack 是当前使用较多的一个打包工具，将众多代码组织到一起使得在浏览器下可以正常运行，下面以打包为目的，实现一个简易版 webpack，支持单入口文件的打包，不涉及插件、分包等。前置知识举个????，先来看看下面这个 demo，例子很简单，一个 index.js，里面引用了一个文件 a.js，a.js 内部引入了 b.js...
vue项目版本打包更新后文件及浏览器存在缓存问题解决方案
qq_37312180的博客
03-07 4301
【代码】vue项目版本打包更新后文件及浏览器存在缓存问题解决方案。
Webpack学习之路，将单个js文件进行打包操作。
qq_24136355的博客
05-09 927
5、运行打包命令：npx webpack，之后会在项目的根目录下自动生产 build/bundle.js 文件。3、局部安装 npm install webpack webpack-cli -D。2、在该文件下执行 npm init 命令，生产 package.json 文件。以上就是 webpack 打包单文件js的基本使用过程。1、新建 01_基础配置 文件。
webpack如何将js文件单独打包到指定文件夹
qq_24243695的博客
03-26 4181
module.exports = { entry: { main: './src/main.js', index: './src/index.js' }, output: { //前面添加路径，最后js生成在dist/js文件夹下 filename: 'js/[name].js', path: path.resolve(__dirname, 'dist') } } ...
webpack4.x入门到进阶
04-18
本课程由老潇(陈潇冰)带大家，掌握webpack4.x的使用，包含工作中常用的插件使用，技巧使用、以及学习思路，初级可以很好的入门，有经验的人可以系统学习。
vue版本更新浏览器缓存问题
09-21
Vue.js是一个JavaScript框架，用于构建用户界面。在使用Vue.js开发网站时，由于浏览器缓存的存在，可能会导致版本更新的问题。 浏览器缓存是指浏览器在第一次请求网页后，会将该网页的一些资源文件（例如JavaScript和CSS文件）保存在本地。当用户再次访问相同的网页时，浏览器会直接从本地缓存中加载这些资源文件，以提高网页的加载速度。 然而，当使用Vue.js进行版本更新时，如果浏览器继续使用缓存的旧版本文件，就会导致网页显示异常或出现错误。为了解决这个问题，可以采取以下几种方法： 1. 使用文件版本号：在引入CSS和JavaScript文件时，可以在文件名中添加一个版本号，例如app.js?v=1.0。每次更新版本时，只需修改版本号即可，这样浏览器会认为是不同的文件，强制重新加载。 2. 添加Cache-Control头信息：通过在服务器端的响应头信息中添加Cache-Control字段，指定浏览器是否应该缓存文件，以及缓存的有效期。通过设置"no-cache"或"no-store"可以禁止浏览器缓存文件。 3. 使用Webpack的chunkhash：在使用Webpack打包项目时，可以使用chunkhash生成唯一的文件名，例如app.f8293f3.js。每次更新时，Webpack会自动生成新的chunkhash，从而强制浏览器重新加载文件。 除了以上方法，还可以使用一些高级技术，如Service Worker来实现离线缓存和更新策略，或使用CDN来分发文件，以避免缓存问题。 总而言之，更新Vue.js版本时，需要考虑到浏览器缓存的存在。通过使用文件版本号、设置Cache-Control头信息或使用Webpack的chunkhash等方法，可以解决浏览器缓存问题，确保网页能够正确加载最新的文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值