webpack使用file-loader单独打包js文件

最新推荐文章于 2024-05-15 01:52:39 发布
最新推荐文章于 2024-05-15 01:52:39 发布
阅读量2.5k 收藏
点赞数
分类专栏： javascript 文章标签： js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_32519511/article/details/76241687
版权

需求：当我们需要将一个js文件进行单独打包，而完全不对其进行处理。以打包jquery为例：

1.在你需要引入jquery的文件中头部加上

require('!file-loader?name=static/js/[name].[ext]!./assets/lib/jquery.js');
后面是你jquery文件的相对路径。

然后在你的index.html 标签引入你打包后的jquery

向然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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 单独打包指定JS文件
weixin_34413103的博客
11-07 1181
背景 最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。 CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 ...
webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用
最新发布
2401_84152177的博客
05-15 711
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
webpack-file-loader
qq_41893334的博客
05-18 2001
1.什么是loader? webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件, 因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外, 还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包, 在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块, 用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader 2.如何使用loader webpack中的
webpack中的file-loader，以及url-loader
aliven1的博客
09-02 334
适用‘[name].[ext]’,表示打包后的图片名称和原文件名保持一致
详解webpack+vue-cli项目打包技巧
11-30
- **图片优化**：使用 `file-loader` 或 `url-loader` 处理图片资源，可以进行压缩并根据尺寸选择不同的编码格式。 - **提取公共库（CommonsChunkPlugin 或 optimization.splitChunks）**：提取共用的库文件，避免...
Vue + Webpack + Vue-loader学习教程之相关配置篇
08-31
Vue.js 是一款流行的前端框架，Webpack 是一个模块打包工具，Vue-loader 则是将 Vue.js 单文件组件(SFCs)与 Webpack 结合的工具。这篇教程将深入讲解如何配置这三个工具，以便于构建一个高效的 Vue 项目。 首先，...
webpack-url-loader-master.
08-26
Webpack 是一个流行的模块打包工具，它能够将 JavaScript、CSS、图片等资源文件转换并整合到一个或多个可部署的静态资源文件中。在 Webpack 的生态中，Loader 和 Plugins 是两个核心概念，它们分别用于处理不同类型...
webpack-----视频讲解
09-23
- **url-loader** 和 **file-loader**：处理图片和字体等静态资源，小于阈值的资源内联到代码中，大于阈值的资源单独输出。 4. **Plugin 功能** - **HtmlWebpackPlugin**：自动生成HTML文件，并将打包后的JS/CSS...
Webpack打包字体font-awesome的方法示例
01-19
代码如下:npm install style-loader css-loader file-loader font-awesome-webpack –save-dev  2. 在入口文件中引入font-awesome require('font-awesome-webpack'); 3. 设置webpack.config.js处理字体文件 这里...
前端项目-webpack-加载器loader配置-打包非.js文件
gaogzhen的博客
07-30 382
前端项目-webpack-加载器loader配置 目录 文章目录1、简介2、loader的调用过程3、加载器的使用3.1、打包处理css文件3.2、打包处理less文件3.3、打包出来scss文件3.4、配置postCss自动添加css的兼容前缀3.5、打包样式表中的图片或字体文字3.6、打包处理js文件中的高级语法***后记*** ： 内容 1、简介 在实际开发过程中，webpack默认只能打包处理以.js结尾的模块，其他非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加
【webpack】使用webpack api打包一个最简单的js资源
lucky569的博客
12-15 857
利用webpack api打包简单js资源
【webpack】入门Demo
Doris_rain的博客
09-12 1535
概述 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 web
静态文件打包file-loader url-loader 5
zhoulucky1993的博客
12-23 373
1：确保自己的电脑已经安装了node和Git软件 2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称) 3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：     1：npm install webpack -g                 2:  npm install webpack-cli -g     3: npm init -y    ...
webpack在处理图片的插件url-loader file-loader
海阔天空
10-11 717
12
WebPack配置（二、loader）
LAZYPET BLOG
01-06 132
一、在对除js文件之外进行打包时（如css less之类）我们需要依靠loader，下列是package文件 　　 { "name": "sdasd", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"E...
使用 file-loader 处理 JS 中的图片
小白小白从不日别的博客
07-04 268
前提：在项目的根目录下 1.通过npminstall初始化项目，安装相关包 2.通过npmrunwebpack打包项目，则会对应生成相应的文件 效果图： 源码： index.js import './index.css'; //引入图片 import img from './img/logo.png'; console.log(img); //创建 img 元素 const imgEl = document.createElement...
Webpack:Loader学习——功能loader,file-loader（将内容原封不动输出（主要有图片 图标））
weixin_47295886的博客
04-03 522
分成3步骤（根据文件内容生成带hash值文件名、 将文件输出出去、 返回：module.exports = "文件路径（文件名）"）但是此时输出6张图片（3张自己输出 3张webpack输出 原因 webpack默认处理图片资源）（需要处理图片、字体等文件。阻止webpack默认处理图片资源，只使用file-loader处理。处理的内容：文件路径+将文件名改成hash值，然后路径表达式。——使用开发模式配置 不要使用devserve模式。引入+第一步（查看文件名生成的效果）运行（辉报错 但是显示了）
WM_03_加载和处理其他资源1
08-04
本篇文章将主要聚焦于"WM_03_加载和处理其他资源1"的主题，重点讲解如何在Webpack环境下使用file-loader处理图片资源。 首先，文章提到在项目中使用图片时，通常有两种常见方法：一是通过HTML的元素设置src属性，二...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值