前面提到了webpack本身的话,可以去打包js和json,但是不能打包样式和图片等资源的。
本章的话我们来分享一下 webPack 如何打包css
、打包html
、打包图片
、打包其他资源
的。
这里的话提到前面的一个概念 loader
, loader可以来帮webpack翻译一些webpack不能识别的模块或者文件。
1、配置文件
如果想使用webpack中的loader
、或者Plugins
来进行一些操作的话,那么的话就需要webpakc的配置文件辣!
webpack.config.js webpack的配置文件
作用:指示webpack干哪些活 根据webpack中的配置来进行加载和运行
大致的目录结构
module.exports = {
// webpack配置
// 入口文件
entry: './src/index.js',
// 输出
output: {
// 输出的文件名
filename: 'dist.js',
// 输出路径
// _dirname node.js的变量,代表当前文件的目录结对路径
path: resolve(_dirname, 'dist')
},
// 模块对象
module: {
// 规则
rules: [
// 详细的loader配置
]
},
// plugins的配置
plugins: {
// 详细的plugins配置
},
// 模式 两者只能取其一
mode: 'development' //开发模式
// mode:'production' 生产模式
}
1.1 模块化
这里的话提到一点!! 所有的构建工具都是基于node.js平台来运行的 模块化的话默认采用common.js
一般情况下我们进行开发的src文件夹下使用基本都是Es6的模块化
而像webpack这种构建工具的话都是默认是Common.js
什么是模块化
模块化就是将变量和函数 放入不同的文件中
模块的作用域是私有的 内部定义的代码只能在当前文件中使用 外部使用那么需要将此模块暴露出去
模块化的好处
减少全局变量 避免变量名和函数命名冲突 提高代码的复用性和维护性
ES6
ECMAScript 6 是新版本javascript语言的标准
CommonJS
commonjs 是一种包管理规范,解决js文件依赖于引用,node 应用由各个模块组成,故commonjs规范 ,加载整个模块。webpack打包是基于commonjs规范下的js文件
差异
项 | ES6 | commonJS |
---|---|---|
引入方式 | 默认引入 import name from "相对或绝对路径 | 默认引入 require("相对路径或者绝对路径") 如果是第三方模块 只需要填入模块名 |
输出方式 | export输出多个,export default 输出一个 | exports输出多个,module.exports输出一个 |
加载 | 可以单独加某一个或多个方法(接口) | 只能加载整个模块,即把所有接口斗殴加载进来 |
加载时机 | 解析阶段生成接口并对外输出 | 运行阶段加载模块 |
值的变化 | 输出的是值的引用,原来模块的值改变,则加载值也变 | 输出的值是拷贝的,已经加载的值会使用缓存,即原来模块的值改变,不会影响已加载的该值 |
this指向 | 指向undefined | 指向该当前模块 |
2、打包样式
上面提到了 如果要打包除了js和json之外的资源的话,这里我们就需要用到loader了,通过loader加载文件,转换未webpack能狗识别的moudle。
功能:在这里我们需要打包css的样式,那么就需要css的loader了,style-loader
、css-loader
。
// 模块对象
module:{
// loader的配置
rules:[{
// 正则匹配所有以.css结尾的文件
test: /\.css$/,
// 不同的文件就必须需要不同的loader
use:[
// use 数组中loader执行顺序,从右到左,依次执行
// 创建一个style标签,将js中的样式资源插入运行,添加到head中生效
'style-loader',
// 将css文件变成commconjs模块加载到js中,里面内容是样式字符串
'css-loader'
]
}]
},
2、HTML打包
这里的html打包指的是使用一个名为html-webpack-plugin
的plugin插件。
需求:在没有这个插件时,我们打完包的js、css等资源是需要手动引入html来运行的。
功能:可以自动引入打包的资源
plugins: [
// html-webpack-plugin
// 根据 template 指定的模板来创建一个html文件,并且会自动的引入打包的所有资源
new htmlWebpackPlugin({
template: './src/index.html',
// filename: 'index.html' 输出文件名
. . .
})
]
3、图片等其他资源打包
module:{
rules:[{
// 匹配的图片类型
test: /\.(jpg|png|gif)$/,
// 不同的文件就必须需要不同的loader 单个loader可以直接写一个loader,多个loader的话就需要use了
loader: 'url-loader', // file-loader
// file-loader打包的图片会给每张图片都生成一个随机的哈希值作为图片的名字
// loader 的 配置项
options: {
// 优势:将小的,即低于8192字节的图片进行base64编码,以减少http请求,存放到打包后的dist.js文件里。
// 劣势: 增大了js或html文件的体积
// 问题:因为url-loader默认使用es6模块化解析, 而html-loader引入图片的commonjs解析
// 解析时会出现问题:[Object Module]
// 解决:url-loader 的es6模块化,使用commonjs解析
limit: 8 * 1024,
esModule: false,
// name: img/[name].[hash:6][ext],
// 几个最常用的占位符
// 【ext】处理的原文件的扩展名。
// 【name】处理的原图片的名字
// 【hash】文件的内容,hash值
// 【hash:length】hash值去长度
// 【contentHash】 在file-loader返回与hash一样,在其他loader可能不同
// 【path】 文件相对于webpack配置文件的路径
}
},
{
test: /.html$/,
// 处理处理html文件的img图片,负责引入img,然后被url-loader进行处理)
loader: 'html-loader',
// 需要关闭es6解析,否则图片显示不出来
options: {
esModule: false
}
}]
}
以上都是webpack5之前的写法 在webapck5后已经有了新的属性和用法
webpack5可以使用 资源模块类型(asset module type),替代file-loader等。
资源模块类型通过添加四种新的模块类型,来代替Loader。
1 asset/resource 发送一个单独的文件并导出URL,替代file-loader,MP3 MP4文件也是一样这样处理即可
2 asset/inline 导出一个资源的data URL,替代url-loader。
3 asset/source 到处资源的源代码,之前通过使用raw-loader实现。
4 asset在导出一个data URL和发送一个单独的文件之间做选择,之前通过url-loader+limit属性实现。
{
test: /\.(jpg|png|gif)$/,
type: "asset/resource",
geneator:{
filename: img/[name].[hash:6][ext]
}.
parser:{
dataUrlCondition:{
maxSize: 100 * 1024 // maxSize是就相当于Limit了
}
}
}
base64 解析
优:base64在客户端本地解码 所以会减少服务器压力
劣:如果图片过大还继续采用base64编码会导致cpu调用率上升网页加载时变卡
招聘广告
言重式招聘 寻人!!!寻志同道合之人、寻竭忠尽智之人、寻深思远虑之人、寻勤恳至诚之人
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端!!!!!
欢迎大家来聊,有意向可发送简历到chen_zhen@dahuatech.com
人生最困难的事情就是认识自己 ———— 无奖竞猜