webpack打包去掉js,css文件后的hash字符串

最新推荐文章于 2024-03-11 01:07:24 发布

夏目友人帐...

最新推荐文章于 2024-03-11 01:07:24 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/xiaoyuer_2020/article/details/109028078

本文介绍如何在Webpack配置中移除生成文件名中的hash值，从而实现加载固定名称的JS和CSS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack打包后的js,css文件通常带有hash字符串，这样做的好处是防止浏览器缓存。但是如果我们想要一个固定的html,加载的js,css名称不带后缀，怎么做呢？

打开build下面的webpack.prod.conf.js

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].js'),
    chunkFilename: utils.assetsPath('js/[id].js')
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏目友人帐...

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端领域Webpack的CSS Modules配置

小白菜的博客

05-07

963

在前端开发中，随着项目规模的不断扩大，CSS样式的管理变得越来越复杂。全局样式容易导致命名冲突、样式污染等问题，影响代码的可维护性和可扩展性。CSS Modules为解决这些问题提供了一种有效的方案，它将CSS类名局部化，使得样式的作用域更加明确。本文的目的在于详细介绍如何在Webpack中配置CSS Modules，让开发者能够更好地管理和使用CSS样式。范围涵盖了CSS Modules的基本概念、配置步骤、实际应用以及相关的工具和资源。

webpack打包常用配置项

weixin_41166682的博客

09-05

1774

文件结构：最基础版先安装 npm i webpack webpack-cli --dev。安装好后需要在webpack.config.js文件中配置它。sass和less预处理的loader也可以这样配置。运行命令：npx webpack 进行打包。

参与评论您还未登录，请先登录后发表或查看评论

webpack-remove-hashed-files:删除哈希文件

05-02

This plugin is able to remove hashed files. If you meet any problems,publish an issue plz. 这个插件可以删除过往webpack打包hash编码后的文件。如果你在使用过程中，遇到了什么问题，欢迎提交issue给我。使用方法初始化npm npm init 安装模块 npm i webpack-remove-hashed-files --save-dev 修改webpack.config.js const removeFiles = require('webpack-remove-hashed-files'); //你的打包目标文件夹 - your distnation folder const buildDir = './dist/'; //自定义选项 - DIY options const opt

webpack 打包去掉文件后的hash字符串

ZFZ5720

03-01

6100

webpack打包后的js,css文件通常带有hash字符串，这样做的好处是防止浏览器缓存。但是有时候我们想要一个固定的html,加载的js,css名称不带后缀，怎么做呢？打开build下的webpack.prod.conf.js output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[...

去除vue打包webpack时图片后面的哈希值 如：localhost:8080/img/p5.16d0c2c7.webp

weixin_51140667的博客

03-11

747

filename: 'img/[name][ext]' // 对于.webp文件，去除哈希。

webpack打包去掉生成js、css文件的hash后缀

青春正在燃烧的博客

07-24

1585

1.vue.config.js加以下代码 chainWebpack: config => { if (process.env.NODE_ENV === 'production') { config.output.filename('js/[name].js').end(); config.output.chunkFilename('js/[name].js').end(); config.plugin

vue项目打包时如何去除文件的hash值？

徐同保的专栏

02-07

1407

vue项目打包时如何去除文件的hash值？

webpack 使用保姆级 html css js 打包处理

lyinshaofeng的博客

11-23

940

webpack 使用保姆级 html css js 打包处理

vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

10-14

在使用Vue CLI和Webpack构建的项目中，遇到打包部署到服务器后ttf字体文件找不到的问题，通常是由于资源路径配置不正确导致的。本文将详细解释这个问题的产生原因以及解决步骤。 1. **问题分析** 当Vue CLI项目...

WebPack优化

harvestUachieve的博客

08-22

623

开启 prodution 模式之后，就会自动开启 Tree-Shaking没有用到的代码，在生产打包的时候删掉就是 tree-shaking这里的 mult 函数就是没用到的代码，在生产打包时应该删掉把多个函数（每个模块可能一个函数）的内容，放到一个函数中代码体积更小创建函数作用域更少代码可读性更好。

【2023-7-25】vue项目打包文件去除hash串

lookingForw_4585的博客

07-25

941

将打包后dist目录下的js/css文件名称中的hash串去除

vue webpack打包后静态资源文件名hash值去除

qq_36497461的博客

05-05

1万+

修改vue项目根目录下的 build/webpack.prod.conf.js文件 1、js文件：由 output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id...

vue-cli 3 使用 webpack 输出 js css 文件 hash 解决缓存问题

醒途

11-10

2354

该解决方案针对 Vue 等 hash 打包静态资源，且 nginx 部署的项目。这样的项目一般来讲打包后生成的 hash 已经帮我们解决了 js/css 的问题。但 html 资源始终是那个 index.html，我们浏览器刷新再刷新始终是 304 状态码。怎么办！摔！ (′д｀ )…彡…彡那我们就只需要解决掉 index.html 这个辣鸡文件的缓存问题就好啦！ nginx 配置如下： location / { gzip_static on; root /usr/share

webpack的hash问题

weixin_33743661的博客

04-26

1065

2019独角兽企业重金招聘Python工程师标准>>> ...

webpack实现css和js文件的hash解决缓存问题

最新发布

03-18

### 使用 Webpack 进行打包及文件上传功能配置 Webpack 是一种模块化打包工具，能够帮助开发者高效地管理前端资源并将其打包成可部署的形式。以下是关于如何使用 Webpack 进行打包以及处理文件上传的相关说明。 #### 一、Webpack 打包基础 Webpack 的核心功能是对 JavaScript 和其他静态资源（如 CSS、图片等）进行打包。通过安装必要的依赖项和编写配置文件 `webpack.config.js`，可以实现对项目的自动化构建过程[^1]。 ```bash npm install webpack webpack-cli --save-dev ``` 上述命令用于全局或本地安装 Webpack 及其 CLI 工具。完成安装后，可以通过创建一个简单的配置文件来定义打包规则： ```javascript // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件路径 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') // 输出目录 }, module: { rules: [ { test: /\.css$/, // 匹配 .css 文件 use: ['style-loader', 'css-loader'] } ] } }; ``` 此配置展示了如何加载 `.css` 文件，并利用 `style-loader` 将样式注入到 DOM 中[^2]。 --- #### 二、Webpack 处理文件上传对于文件上传的需求，通常涉及将用户提交的文件转换为 Base64 编码字符串或其他形式的数据流以便于传输至服务器端。虽然 Webpack 主要专注于前端资源的打包工作，但它也可以借助插件支持文件类型的解析与优化。 ##### 1. 图片和其他媒体文件的处理为了使 Webpack 能够识别并打包图片、字体图标等非脚本类资产，需引入相应的 Loader 插件。例如： - **file-loader**: 把文件复制到输出目录下； - **url-loader**: 类似 file-loader，但当文件小于指定大小时会自动转化为 inline base64 URL；安装这些插件的方法如下所示： ```bash npm install file-loader url-loader --save-dev ``` 接着更新 `webpack.config.js` 来应用它们： ```javascript module.exports = { ... module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, type: 'asset/resource' // 自动选择合适的 loader (推荐方式) }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, use: [ { loader: 'file-loader', options: { name: '[name].[hash].[ext]', outputPath: 'fonts/' } } ] } ] } }; ``` 此处设置了针对不同扩展名的匹配规则，确保各类资源被正确处理。 ##### 2. Gzip 压缩后的文件分发如果希望进一步提升性能，则可以在生产环境中启用 Gzip 压缩技术。这不仅减少了网络带宽消耗还加快了页面加载速度。下面是一个基于 Nginx 实现的例子[^3]: ```nginx location /h5/ { gzip on; gzip_static on; gzip_http_version 1.1; gzip_proxied any; gzip_min_length 1k; gzip_buffers 4 8k; gzip_comp_level 6; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/svg+xml; } ``` 注意这里启用了两个重要参数——`gzip_static` 表明如果有预生成好的 *.gz 版本则直接提供给客户端而不是实时压缩。 --- #### 三、Vue3 下的 Webpack 配置优化在 Vue3 应用程序中调整 Webpack 设置同样非常重要。比如关闭无用的地图文件以减少最终产物体积就是一个典型例子[^4]: ```javascript // vue.config.js module.exports = { productionSourceMap: false, configureWebpack: { optimization: { splitChunks: { chunks: 'all' } } } }; ``` 以上代码片段禁用了源映射的同时也开启了代码分割策略从而改善用户体验。 --- ###