最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
npm install --save-dev css-loader
想要webpack打包资源,需要在主文件中引入css文件
import css from ‘file.css’;
在webpack.config.js中,因为使用了style-loader,也需要安装
npm install style-loader
const path=require(“path”) //nodejs核心模块
module.exports={
//入口
entry:“./src/main.js”, //相对路径
//输出
output:{
//文件的输出路径
//__dirname nodejs的变量,代表当前文件的文件夹目录
path:“path.resolve(__dirname,“dist”)”, //绝对路径
//文件名
filename:“main.js”,
},
//加载器
module: {
rules: [
// loader的配置
{
test: /.css$/, //只检测.css的文件
use: [ //执行顺序:从右到左(从下到上)从css-loader开始执行,然后执行style-loader
‘style-loader’, //将js中css通过创建style标签添加到html文件中生效
‘css-loader’ ,//将css资源编译成commonjs的模块到js中
]
}
]
},
//插件
plugins:[
//plugin的配置
].
//模式
mode:“development”,
};
每次修改完要在终端打包!!!!!!!!
npx webpack
每次修改打包都要删除旧的比较麻烦,可以加上
clean:true
output:{
//文件的输出路径
//__dirname nodejs的变量,代表当前文件的文件夹目录
path:“path.resolve(__dirname,“dist”)”, //绝对路径
//文件名
filename:“main.js”,
//自动清理上次打包的内容
//原理,在打包前,将path整个目录内容清空,再进行打包
clean:true;
},
二、处理less资源
==========
安装less-loader
npm install --save-dev less-loader less
const path=require(“path”) //nodejs核心模块
module.exports={
//入口
entry:“./src/main.js”, //相对路径
//输出
output:{
//文件的输出路径
//__dirname nodejs的变量,代表当前文件的文件夹目录
path:“path.resolve(__dirname,“dist”)”, //绝对路径
//文件名
filename:“main.js”,
},
//加载器
module: {
rules: [
// loader的配置
{
test: /.css$/, //只检测.css的文件
use: [ //执行顺序:从右到左(从下到上)从css-loader开始执行,然后执行style-loader
‘style-loader’, //将js中css通过创建style标签添加到html文件中生效
‘css-loader’ ,//将css资源编译成commonjs的模块到js中
],
},
{
test: /.less$/,
//loader:‘xxx’, //只能使用1个loader
use: [
‘style-loader’, //将js中css通过创建style标签添加到html文件中生效
‘css-loader’ ,//将css资源编译成commonjs的模块到js中
‘less-loader’, //将less编译成css文件
],
}
]
},
//插件
plugins:[
//plugin的配置
].
//模式
mode:“development”,
};
三、处理图片资源
=========
const path=require(“path”) //nodejs核心模块
module.exports={
//入口
entry:“./src/main.js”, //相对路径
//输出
output:{
//文件的输出路径
//__dirname nodejs的变量,代表当前文件的文件夹目录
path:“path.resolve(__dirname,“dist”)”, //绝对路径
//文件名
filename:“main.js”,
},
//加载器
module: {
rules: [
// loader的配置
{
test: /.css$/, //只检测.css的文件
use: [ //执行顺序:从右到左(从下到上)从css-loader开始执行,然后执行style-loader
‘style-loader’, //将js中css通过创建style标签添加到html文件中生效
‘css-loader’ ,//将css资源编译成commonjs的模块到js中
],
},
{
test: /.less$/,
//loader:‘xxx’, //只能使用1个loader
use: [
‘style-loader’, //将js中css通过创建style标签添加到html文件中生效
‘css-loader’ ,//将css资源编译成commonjs的模块到js中
‘less-loader’, //将less编译成css文件
],
},
//处理图片资源
{
test: /.(png|jpe?g|gif|webp|svg)$/,
type:“asset”,
parser:{
dataUrlCondition:{
//小于10kb的图片转base64
//优点:减少请求数量 缺点:体积会更大
maxSize:10 * 1024 , //10kb
}
}
},
]
},
//插件
plugins:[
//plugin的配置
].
//模式
mode:“development”,
};
四、修改输出文件目录
===========
如果都把文件输出到一个dist文件夹,会很乱。
我们可以给打包的文件分类,js文件去专门的js文件夹。如下:
output:{
//文件的输出路径
//__dirname nodejs的变量,代表当前文件的文件夹目录
path:“path.resolve(__dirname,“dist”)”, //绝对路径
//入口文件导报输出文件名
filename:“js/main.js”,
},
图片的保存路径:
{
test: /.(png|jpe?g|gif|webp|svg)$/,
type:“asset”,
parser:{
dataUrlCondition:{
//小于10kb的图片转base64
//优点:减少请求数量 缺点:体积会更大
maxSize:10 * 1024 , //10kb
}
},
generator:{
//输出图片名称
//hash是图片的hash值名称,冒号后面的数字为hash值截取的位数,ext是扩展名
filename:“static/image/[hash:10][ext][query]”,
}
},
五、处理字体图标资源
===========
一般是阿里图标库里的字体和图标的资源
{
test: /.(ttf|woff2?)$/,
type:“asset/resource”,
generator:{
//输出名称
//hash是图片的hash值名称,冒号后面的数字为hash值截取的位数,ext是扩展名
filename:“static/media/[hash:10][ext][query]”,
}
},
六、处理其他资源
=========
当有新资源如mp3,mp4等格式时,就在文件类型那里加上资源的类型就行。
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
nimg.cn/c2f0c09061b1461ca7642d58843a2dc8.png)
六、处理其他资源
=========
当有新资源如mp3,mp4等格式时,就在文件类型那里加上资源的类型就行。
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-IeLFHvHB-1715218149456)]
[外链图片转存中…(img-GU0p0gnI-1715218149456)]