Webpack 打包资源篇

海军 等级 656 0 0

Webpack 打包资源篇




继上篇Webpack 初体验后,本章将讲解如何进行打包资源文件,图片的打包以及其它资源呢的打包。以及Webpack的 devServer 自动化。






写在前面说得话
此篇文章为记录学习Webpack,
如果觉得文章对你收获不大,请各位大佬轻喷。
如果有收获得话,关注以后获取更多技术内容。

打包图片资源

Webpack 用来处理一些文件时, 是选用对应的loader 来 处理打包的,知道这个原理,就好办了。

例如: 打包图片,就找对应的 打包图片的 loader, 1. 安装 2. 使用 ,这样就完成了处理打包。

图片打包使用的是loader 为 url-loaderfile-loader 来处理打包图片

test: 自定义要处理哪些图片格式

使用url-loader时,可通过options 来配置一些图片的属性,例如大小,

次例子,当图片大小 小于 1MB 转化为Base64 来处理

具体实现

在项目的根目录下 创建一个 webpack.config.js
Webpack 打包资源篇

上面是 Webpack 的具体配,入口文件为 ./src/index.js

在入口文件 index.js 中 导入 要打包的文件,此例子是打包图片资源,

index.js

import './index.css'
index.css

.p1{
    width200px;
    height200px;
    backgroundurl('./img/f4.png');
}
.p2{
    width200px;
    height200px;
    backgroundurl('./img/f6.png');
}
.p3{
    width200px;
    height200px;
    backgroundurl('./img/f7.png');
}
打包后的文件 显示内容
Webpack 打包资源篇

打包其它资源

所谓打包其它资源是,处理之前没有处理过的文件。

此demo 为处理 字体, 采用loader 为 file-loader

关键实现代码
    // 模块
    module:{
        // 打包规则
        rules: [
            // 处理css
            {
                test/\.css$/,
                use: ['style-loader''css-loader']
            },
            // 处理其它资源
            {
              // exclude 排除, 除了css  js html  ,其它格式都进行处理,
              // 可以自定义排除 之前处理后的文件
              exclude: /\.(css|js|html)$/,
              // 采用file-loader
              loader:'file-loader'
            }
        ]
    }
打包后的文件
Webpack 打包资源篇
优化后,打包名
Webpack 打包资源篇
    // 模块
    module:{
        // 打包规则
        rules: [
            // 处理css
            {
                test/\.css$/,
                use: ['style-loader''css-loader']
            },
            // 处理其它资源
            {
              exclude/\.(css|js|html)$/,
              loader:'file-loader',
              //通过options 配置来修改文件的配置操作
              options: {
                  // hash:变量名长度  ext 为扩展名
                  name: '[hash:8].[ext]'
              }
            }
        ]
    }

devServe 配置

自动检测src/ 目录下文件变化, 自动刷新页面,自动打包文件

安装依赖npm i webpack-dev-server -D

启动指令 npx webpack-dev-server

主要配置代码
// 在webpack.config.js 下配置devServer   
devServer:{
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        //  自动打开网站
        open: true
    }
Webpack 打包资源篇
启动项目 http://localhost:3000/


关注微信公众号 获取更多资料
Webpack 打包资源篇
回复 '加群', 即可加入 前端自学交流群
收藏
评论区

相关推荐

[占山为王]我是如何四步将一个微信小程序请求库改成Taro的
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
全栈进阶:Nginx基本功能及其原理
<div class"output_wrapper" id"output_wrapper_id" style"fontsize: 16px; color: rgb(62, 62, 62); lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; fontfamily: 'Helvetica
2021前端技术面试必备Vue:(一)基础快速学习篇
由于疫情的影响,相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员, 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?<br/1.大部分的回复: 求职平台都是 ‘已回复’,然后没有下文,你遇到了吗?<br/2.各个公司对技术的要求增高<br/3.有人说开始搞副业<br/ 在我来看,这一年已经过去了四分
2021前端技术面试必备Vue:(三)Router篇
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"padding: 0 10px; wordspacing: 0px; wordwrap: breakword; textalign: left; fontfamily: Opti
Webpack 打包资源篇
<section datatools"新媒体排版" dataid"13439" datastyletype"9" style"visibility: visible;"<p style"maxwidth: 100%; visibility: visible;"<br mpafromtpl"t" style"visibility
C++面向对象实现封装线程池
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gray; border-width: 2px
HTML5中新增的布局标签
1.1.1   盒子模型层次 盒子模型的层次遵循以下顺序: 内容+padding à 边框 à background-image à background-color à margin![](https://oscimg.oschina.net/oscnet/722909c8dcfd273c73b0c6534e20f8d9bd4.gif) ![](ht
.clear 万能清除浮动
html body div.clear, html body span.clear { background: none; border: 0; clear: both; display: block; float: none;
QQ空间说说生成器
index.html <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> body { margin: 0; padding:
LINUX中文件描述符传递
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; border-width: 2px 0
LINUX打开文件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; border-width: 2px 0
MySQL特异功能之:Impossible WHERE noticed after reading const tables
<div class="htmledit\_views"> <div class="bct fc05 fc11 nbw-blog ztag" style="line-height:28px;font-size:16px;margin:15px 0px;padding:5px 0px;overflow:hidden;font-family:'Hiragino
ASMSupport教程4.2
<h2>4.2 生成Return操作</h2> <p>这一节我们将讲述如何生成return操作,我们将生成如下代码:</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; pa
AVR 嵌入式单片机芯片的中断系统介绍
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gray; border-width: 2px
NetBeans Weekly News
body { margin:5px 15px 5px 15px; font-size: 11px; font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif; background-colo