Webpack 打包资源篇

海军 等级 380 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
JavaScript设计模式之单例模式
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; word
[前端必知 ]HTTP or TCP/IP 基础
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; padding: 0 10px; wordspacing: 0px; wordbreak: breakword; wordwrap: break
多人协作必备技能Git
<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
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Webpack 5.0 初体验
<p style"textalign: center;"<img class"rich_pages" dataratio"0.66640625" datas"300,640" src"https://usergoldcdn.xitu.io/2020/4/12/1716ebf44174dac8?w1080&h720&fjpeg&s
Webpack 打包资源篇
<section datatools"新媒体排版" dataid"13439" datastyletype"9" style"visibility: visible;"<p style"maxwidth: 100%; visibility: visible;"<br mpafromtpl"t" style"visibility
目前最全的第三方平台 授权(OAuth2.0)登录接入指南
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
什么是索引?Mysql目前主要的几种索引类型
一、索引MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度。打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是一个人力三轮车。索引分单列索引和组合索引。单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引。组合索引,即一个索引包含多个列。创
webpack 基本配置
概念本 质上,webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。当 webpack处理应用程序时,它会递归地构建一个 依 赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle 。 安装确保安装了nodejs 项目文件环境cd
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注