在使用webpack进行项目打包的时候,我们可通过以下方式对不同类型的资源,进行文件名或文件路径的修改
1、使用copy-webpack-plugin插件复制的文件,这个就是配置from和to
new CopyPlugin({
patterns: [
{
from: "**/**.txt",
to: "xx/xx.ext"
},
],
})
2、修改js文件的文件名
在webpack中有一个output的配置项,可以在这里配置js文件的文件路径和文件名
修改入口文件的文件名
通过配置output的filename属性,可以动态的改变入口文件的文件路径和文件名,通常的我们会这样设置filename: "[name].[chunkhash].js"
,而其中的name就是文件名修改的关键,这个name我们可以在entry入口中进行定义
entry:{
index: path.resolve(__dirname, './src/index.js'),
youindex: path.resolve(__dirname, './src/index.js')
}
在entry中也可以配置某一个库/组件的文件进行打包
entry:{
ol: path.resolve(__dirname, './static/ol/ol_me.js'),
}
filename除了可以设置类似占位符格式的字符串,还可以是一个函数,函数第一个参数中包含了打包文件的一系列信息,根据这些信息,可以去自定义打包文件的输出名称
output:{
filename: (pathData) => {
return pathData.chunk.name === 'main' ? utils.assetsPath('js/youfilename.js') : utils.assetsPath('js/[name].[chunkhash].js');
}
}
filename占位符字符串对应的结果可以由以下参数拼接或者返回:
修改非入口(按需引入)文件的文件名
通过配置output的chunkFilename 属性,可以动态的改变非入口文件的文件路径和文件名,通常的我们会这样设置chunkFilename: "[name].[chunkhash].js"
,而其中的name就是文件名修改的关键。
chunkFilename 指未被列在 entry 中,却又需要被打包出来的 chunk 文件的名称,output.chunkFilename 默认使用[id].js或从 output.filename 中推断出的值,id是输出文件的块id,一般是从1开始叠加的数字,除了[id]还可以配置占位符[name],[name]是文件按需引入时配置的chunkName值,如果没有配置chunkName,[name] 会被预先替换为 [id]。
配置好chunkFilename后,还需要在文件按需引入时配置chunkName值,早期的按需引入使用require.ensure(),这就不说了,现在按需引入基本都是使用import(),在import()中我们加入chunkFilename 的配置,就可以修改打包后的文件路径和文件名,配置以/* webpackChunkName: “xxx” */
的形式存在
const Login = () => import(/* webpackChunkName: "myLogin" */ '../components/login.vue')
在webpack 4的版本中chunkFilename必须是一个字符串,但是在webpack 5中,他也可以像filename一样设置一个函数,去自定义文件路径和文件名。
chunkFilename字符串占位符对应的结果和filename一样,可以由以下参数拼接或者返回:
3、修改css文件的文件名
webpack对css文件的打包需要用到插件,之前的webpack使用extract-text-webpack-plugin进行css文件打包,这里不讲了,现在的webpack使用mini-css-extract-plugin进行css文件打包。
在mini-css-extract-plugin的配置中,同样有关于filename和chunkFilename的配置,具体用法和修改js文件名的配置一样。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
// filename: utils.assetsPath('css/[name].[contenthash].css'),
filename: (pathData) => {
return pathData.chunk.name == 'main' ? utils.assetsPath('css/youfilename.[hash].css') : utils.assetsPath('css/[name].[hash].css')
},
chunkFilename: (pathData) => {
return utils.assetsPath('css/[id].[hash].css')
},
})
4、修改其他资源文件(图片、视频等)的文件名
webpack对图片等资源文件的打包需要用到url-loader 或者 file-loader 去合理地处理它们,而url-loader内部也是封装了file-loader去处理
webpack中对图片等资源的打包配置在module.rules中,rules中可以通过options属性值,把配置传递给url-loader或者file-loader。file-loader的配置项中有一个属性name,我们可以通过配置这个name属性来修改打包文件的文件路径和文件名,name的配置同样支持字符串占位符和函数两种形式,通常我们像下面一样配置字符串的形式
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// 10000字节以下的图片会被转换为base64编码
limit: 10000,
// 生成 name+7位hash+ext格式的文件名
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
其中[name]、[hash]等占位符都和filename的占位符一样
除了字符串形式,还可以像下面一样配置更灵活的函数形式
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// 10000字节以下的图片会被转换为base64编码
limit: 10000,
// 生成 name+7位hash+ext格式的文件名
name: function(filepath){
let filename = filepath.split('\\').pop()
return process.env.NODE_ENV !== 'development' && filename == 'xxx.png' ? utils.assetsPath('img/youfilename.[ext]') : utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
},
文章浏览阅读157次。pom.xml:<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.or_java 逆向工程 generatorconfiguration
文章浏览阅读523次。目录前置知识JVM指令码指令码编辑Javassist使用场景基本使用常见插入方法添加异常代码块总结方法拷贝特殊语法特殊语法表$0, $1, $2$args$$$cflow$r$w$_$sig$class创建类实例访问类实例变量参考链接:https://www.cnblogs.com/sunfie/p/5154246.html前置知识JVM指令码Java源代码不能直接运行,需要编译成class文件,然后被JVM加载后运行。Class文件是由JVM指令码所组成的,JVM加载Class文件,就是在加载Cl_ctmethod
文章浏览阅读559次。Maven介绍Maven是项目管理工具,对软件项目提供构建与依赖管理。Maven是Apache下的Java开源项目。Maven为Java项目提供了统一的管理方式,已成为业界标准。Maven核心特性项目设置遵循统一的规则,保证不同开发环境的兼容性。强大的依赖管理,项目依赖组件自动下载、自动更新。可扩展的插件机制,使用简单,功能丰富。Maven的安装与配置安装Maven之前需要安装jdk1.8。从官网下载MavenMaven官网:https://maven.apache.org/bin
文章浏览阅读1.9k次。一、C #中Sort()函数的使用与C++中类似,C#中也有自己的Sort()函数,其使用方式:(列表List的排序使用方式)第一步:声明一个myComparer类,它继承自IComparer:class myComparer : IComparer<MyPoint>/*实现 IComparer<T> 接口中的 Compare 方法, ..._c# 获取list 下表
文章浏览阅读1.7w次,点赞16次,收藏17次。Python从入门到精通零基础入门篇
文章浏览阅读1.1k次。大家都知道,java中JDBC中,有个预处理功能,这个功能一大优势就是能提高执行速度尤其是多次操作数据库的情况,再一个优势就是预防SQL注入,严格的说,应该是预防绝大多数的SQL注入。 用法就是如下边所示:[java] view plain copyString sql="update cz_zj_directpayment dp_java sql prepare的作用
文章浏览阅读617次,点赞8次,收藏8次。本文介绍了无人直播系统的功能和优势,以及如何进行开发。无人直播系统能够实时采集、编码和传输视频流,支持弹幕互动,并具备实时性、互动性、灵活性和可扩展性等优势。开发无人直播系统的方法包括确定需求、设计系统架构、实现功能、部署上线和维护优化。通过定制开发无人直播系统,可以满足不同业务场景下的实时视频传输和互动需求,提供高质量的直播体验。_无人直播系统源码
文章浏览阅读539次。嘿嘿,我刚上研一,体育方面的研究生,想做计算机视觉方面的课题,这几天都在配置opencv和tensorflow的环境,走了不少歪路,总结了一下。一、关于opencv源码的查看和编译:http://blog.csdn.net/poem_qianmo/article/details/21974023 这个网址介绍的很全。其中要注意的是:如果安装的是vs2017,那么current generato...
文章浏览阅读84次。在“设置”应用中,找到“应用程序”或“应用管理器”选项,然后找到默认浏览器应用。点击该应用,然后找到“存储”或“存储空间”选项,点击进入。在存储页面中,找到“清除数据”或“清除缓存”选项,并点击确认。在Android设备上,打开“设置”应用,并找到“应用程序”或“应用管理器”选项。点击该应用,然后找到“清除默认值”或“清除默认设置”的选项,并点击确认。在“设置”应用中,找到“应用程序”或“应用管理器”选项,然后找到另外一个浏览器应用。点击该应用,然后找到“清除数据”或“清除缓存”选项,并点击确认。
文章浏览阅读4.4k次。实际项目中,上传文件时实际可能需要传输一个token。方法一:1、查看vue antdesign文档https://vue.ant.design/components/upload-cn/2、使用customRequestcustomRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function3、定义customRequest,之前定义action行为会被覆盖,可以注释掉4、customRequest代码如下customRequest ._ant design vue 上传
文章浏览阅读4.9k次,点赞12次,收藏92次。C/C++ 是一门底层、细粒度、功能强大、学习曲线陡峭的语言,掌握这门语言的程序员通常有着更长的生命周期以及更深的护城河。但入门门槛高也是不争的事实,这篇文章把C++学习划分为入门、进阶、深入三个阶段,每步提供相应的学习方法和资源,帮助大家更好地掌握这门语言。_c++学习路线
文章浏览阅读7.1k次,点赞5次,收藏16次。最近写了一个web项目,但在浏览器中测试,发现某些页面中的图片无法显示。原因是在加载页面时一些img标签或者css中的background-image请求了一些含有中文的图片。于是这个页面会自动向服务端发送请求获取资源,但是这个过程不会体现到地址栏的,是在后台操作的。例如我请求了一个index.html页面但是页面中有一个<img src="img/测试图片.png">标签。通过f..._为啥单独打开html显示图片,用tomcat打开图片不显示