webpack 静态资源内联

最新推荐文章于 2024-05-30 08:49:51 发布
最新推荐文章于 2024-05-30 08:49:51 发布
阅读量1.2k 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34416331/article/details/103753704
版权

         一、什么是静态资源内联

二、使用

2.1 raw-loader 内联 html

2.2 raw-loader 内联 JS

2.3 html-inline-css-webpack-plugin  实现CSS内联

三、现象

一、什么是静态资源内联

静态资源内联，即将css、js、图片等资源，内联到html。我们可以通过静态资源内联来减少文件请求数量，优化加载速度

代码层面:

  • 页面框架的初始化脚本，如rem换算等
  • 上报相关打点
  • css 内联避免页面闪动

请求层面：减少 http 网络请求数

  • 小图片或字体内联(url-loader)

 

二、使用

// 需要使用0.5.1版本
npm i raw-loader@0.5.1 -D

2.1 raw-loader 内联 html

<script>${require('raw-loader!babel-loader!./meta.html')}</script>
// search.html

<!DOCTYPE html>
<html lang="en">
<head>
    ${require('raw-loader!./meta.html')} // 内联meta.html
    <title>Document</title>
    <script>${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}</script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./search.js"></script>
</body>
</html>

2.2 raw-loader 内联 JS

// 若包含ES6，则先用babel-loader转换
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>

2.3 html-inline-css-webpack-plugin  实现CSS内联

// CSS内联
npm i html-inline-css-webpack-plugin -D
// webpack.prod.js

module.exports = { 
    plugins: [ 
        ...,
        new HTMLInlineCSSWebpackPlugin()
    ],
}

 

三、现象

github项目地址： webpack样例

可以看到，meta.html的文件内容，被内联进了index.html

js文件中的内容，也被内联进了index.html

 

AldarLin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
React with Webpack - 3: 内联image、font
whereismatrix的专栏
11-12 1467
React with Webpack: 内联image、font， 降低必要的请求数。
Webpack打包时将文件内联
越陌度阡
01-08 565
在编写前端代码时，有些文件作为单独的文件引用会更便于维护，但是有些文件却必须要内联。文件内联的场景如下：1. 页面加载时需要初始化的代码需要内联；2. 一些上报与回传的打点的代码需要内联；3. 为了避免页页闪动，首屏渲染的CSS代码需要内联；4. 减少HTTP的网络请求次数，将小图片或字体文件直接内联；在Webpack中内联html和javaScript代码可以通过raw-loader这个插件来完成。
webpack4 资源文件内联
weixin_43294560的博客
01-27 261
减少请求和避免闪动 js和html内联: html: <%= require('raw-loader!文件路径') %> 如:<%= require('raw-loader!./meta.html') %> js:内联时还需要添加babel-loader解析es6语法 <%= require('raw-loader!babel-loader!文件路径') %> 如:<script><%= require('raw-loa
Webpack5静态资源内联
人生百年几今日，今日不为真可惜。
02-26 1997
文章目录背景介绍资源内敛的意义使用步骤插件安装内联html内联js内联CSS直接使用`style-loader`借助 `html-inline-css-webpack-plugin` 背景介绍 首先什么是静态资源内联？静态资源内联，就说将CSS，JS，图片等静态资源，内联到html。比如上一文Webpack5之px自动转换成rem提到的，页面font-size大小计算的js脚本。 我们可以通过静态资源内联来减少文件请求数量，优化加载速度。 资源内敛的意义 页面框架的初始化脚本，如rem换算等 上报相关打点
webpack进阶篇（十七）：静态资源内联
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
06-26 3127
说明 玩转webpack课程学习笔记。 什么是资源内联 资源内联（inline resource），就是将一个资源以内联的方式嵌入进另一个资源里面. 1、HTML 内联 CSS （内联 CSS 或者 行内 CSS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
jamstack-web-starter：使用Eleventy，Tailwind CSS，Webpack和PostCSS的静态网站工作流程
02-03
在生产中缩减HTML 在生产中内联和缩小CSS Webpack用于捆绑脚本针对生产进行了优化的脚本使用制作的文档<head>入门安装依赖项npm install在本地工作检测到更改后开始监视任务以进行编译npm start创建生产版本...
浅谈 Webpack 如何处理图片(开发、打包、优化)
11-27
从 webpack book 的 Loading Assets 一章中延申出来。 改善前端项目体验中，很重要的点就是静态...webpack 可以用使用url-loader 将静态图片转化为 base64 编码的字符串，并内联在对应的脚本中。大幅度地较少了页面
webpack-bootstrap：基于Webpack的Bootstrap 4模板
01-30
Webpack Bootstrap 4模板描述该项目包含预配置的Webpack 4，以执行以下任务： 将SCSS编译为CSS 优化图像（ *.png ， *.jpeg ， *.gif ） 将SVG转换为内联'data:image'格式字体加载器自动将static目录复制到dist目录...
angular-webpack-react
05-08
这使您不仅可以捆绑javascript，还可以捆绑任何静态资源。 您可以轻松编写自己在node.js中运行的加载程序。 CODE SPLITTING我们的代码拆分为模块。 这对于组织大型应用程序很有用。 代码拆分可用于将代码拆分为按...
guido：适用于cmd amd react jquery sass把手开发体系结构的构建工具，内置静态资源（样式，图片）内联外链，自动化雪碧图，资源到base64，资源文件注入模板，dev服务器，自定义路由等构建，调试，打包部署功能，减少同体系开发环境的重复配置
02-02
基于webpack4的内置工具的内置工具，还内置静态资源（样式，图片）内联外链，自动化雪碧图，资源到base64，资源文件注入模板，dev服务器等生成，调试，打包部署功能，减少同体系开发环境的重复配置。 安装和使用 ...
18-webpack 实现 Html、JavaScript、CSS 内联
ZWQ0325的博客
07-25 1325
在 10- webpack 自动生成 index.html 之后，index.html 的自动生成任务 由 html-webpack-plugin 接管。 有时候会面临需要将一段 html标签内容、初始化页面的JavaScript、初始化样式CSS 需要内联的需要，可以直接写到 index.html 中去，但是为了方便维护最好还是把文件独立出来，然后由 webpack 自动完成内联任务。 webp...
静态资源内联
ccxCode的博客
07-17 121
HTML 和 JS内联 代码层面 页面框架的初始化脚本 css内联避免页面闪动 请求层面：减少HTTP网络请求数 ⼩图⽚或者字体内联 (url-loader) html-webpack-plugin使用的是ejs模板引擎 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
webpack之静态资源内联
仇益阳的博客
06-11 1067
webpack之静态资源内联 HTML内联使用raw-loader
玩转webpack（03）：webpack进阶使用
大香蕉的博客
12-10 1079
一、自动清理构建目录 二、自动补齐CSS3前缀 三、移动端px自动转换为rem 四、静态资源内联 五、多页面应用打包通用方案 六、使用source map 七、基础库分离（externals） 八、提取页面公共资源 九、Tree Shaking的原理和使用 十、Scope Hoisting的原理和使用 十一、代码分割和动态import 十二、在webpack中使用ESLint ** eslint-loader安装报错? 十三、webpack打包库和组件
怎样将js写入html,如何将webpack4插入到html中的行内JS打包出来？
weixin_39640090的博客
06-04 255
crea-react-app创建的项目，打包后HTML中就加入了如下的代码，我找不到怎么把这个JS代码打包出来，这个是模块机制的代码吗？function r(r) {for ( var n, f, i = r[0], l = r[1], a = r[2], c = 0, s = []; c < i.length; c++ ) f = i[c], o[f] && s.push(...
webpack html模块化,webpack 模块化机制
weixin_35970195的博客
06-30 205
为什么需要模块化？随着网站内容越来越复杂，浏览器和用户的交互越来越细腻，网站再也不是简单的内容呈现，更像是一个复杂的客户端软件，其中html/css/js代码越来越多，逻辑越来越复杂，越来越不便于管理，为了解决这个问题，才出现了模块化的概念，也就是说模块化更多的是工程方面的产出，为了应对更复杂的网站开发。梳理下网站的发展过程，大家也就知道为什么模块化是必然出现的了：✦ 早期一个html文件，通过s...
webpack4配置说明（插件篇）
qq_38850058的博客
11-16 173
1.打包代码压缩 JSCSS图片压缩 2.自动清理构建脚本 clean-webpack-plugin const { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin(), ] ...
npm build报错Cannot find module ‘webpack/lib/rules/BasicEffectRulePlugin‘解决方法
邓邓子的博客
05-27 262
尝试了无数种方法，最后删除项目，重新下载源码，重新编译解决。各种操作把环境弄乱了。
Webpack 通过SplitChunksPlugin实现包拆分
最新发布
weixin_43891869的博客
05-30 1195
要通过SplitChunksPlugin将从node_modules目录导入的模块合并到一个名为’Vendors’的chunk中，你可以通过修改webpack的配置文件中的分包策略来实现。SplitChunksPlugin：这是一个更加强大的拆包工具，它会分析模块间的依赖关系，将多个模块公共的部分提取到单独的 chunk 中。分包策略可以在这里自行定义，这样，在打包的时候，Webpack就会将所有从node_modules目录导入的模块打包到一个单独的’vendors’chunk中。默认值为 30000。
webpack静态资源打包
11-28
Webpack是一个非常流行的前端工具，主要作用是处理模块依赖关系，将模块打包成静态资源文件，并提供一些高级功能，如代码分割、热模块替换、代码压缩等。下面是使用Webpack进行静态资源打包的步骤： 1.安装Webpack和Webpack CLI ```shell npm install webpack webpack-cli --save-dev ``` 2.创建Webpack配置文件webpack.config.js ```javascript const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件 output: { filename: 'bundle.js', // 打包后的文件名 path: path.resolve(__dirname, 'dist') // 打包后的目录 } }; ``` 3.在package.json中添加打包命令 ```json { "scripts": { "build": "webpack --mode=production" } } ``` 4.运行打包命令 ```shell npm run build ``` 以上就是使用Webpack进行静态资源打包的基本步骤。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值