webpack入门速学笔记(1)，2024最新Web前端开发面试解答

新建demo03，基本上可以使用demo02的内容，在根目录下放一个index.html

然后src下面搞一个index.css

body{

background-color: blanchedalmond;

}

在index.js中引入

import ‘./index.css’

因为webpack默认不支持css引入，所以要使用loader

let path=require(‘path’)

module.exports={

entry:“./src/index.js”,//入口文件

output:{

filename:‘bundle.js’,//输出文件名

path:path.resolve(__dirname,‘dist’)//输出路径，用绝对路径

},

mode:‘development’,//生产模式

module:{

//对某种格式的文件进行转换处理

rules:[

{

test:/.css$/,//使用正则匹配

use:[

//顺序从下到上

‘style-loader’,//把css-js引入到style

‘css-loader’,//把css转换成js

]

}

]

}

}

要安装两个loader依赖

之前的颜色生效了

使用plugin插件

先可以实现自动整合编译，需要用到的插件为html-webpack-plugin要安装依赖

/index.html

let path=require(‘path’)

let HtmlWebpackPlugin=require(‘html-webpack-plugin’)

module.exports={

entry:“./src/index.js”,//入口文件

output:{

filename:‘bundle.js’,//输出文件名

path:path.resolve(__dirname,‘dist’)//输出路径，用绝对路径

},

mode:‘development’,//生产模式

module:{

//对某种格式的文件进行转换处理

rules:[

{

test:/.css$/,//使用正则匹配

use:[

//顺序从下到上

‘style-loader’,//把css-js引入到style

‘css-loader’,//把css转换成js

]

}

]

},

//配置插件

plugins:[

new HtmlWebpackPlugin({

template:‘./index.html’

})

]

}

运行webpack之后发现dist目录下有了新的index.html

打包图片资源

新建demo05

在入口index.js中引入图片

这时候肯定要加关于png的依赖

需要两个loader： url-loader html-loader file-loader

let path=require(‘path’)

let HtmlWebpackPlugin=require(‘html-webpack-plugin’)

module.exports={

entry:“./src/index.js”,//入口文件

output:{

filename:‘bundle.js’,//输出文件名

path:path.resolve(__dirname,‘dist’)//输出路径，用绝对路径

},

mode:‘development’,//生产模式

module:{

//对某种格式的文件进行转换处理

rules:[

{

test:/.css$/,//使用正则匹配

use:[

//顺序从下到上

‘style-loader’,//把css-js引入到style

‘css-loader’,//把css转换成js

]

},{

test:/.(jpg|png|gif)$/,

loader:‘url-loader’,

options:{

limit:8*1024,//图片小于8kb,用base64处理，减少请求

esModule:false,//把url-loader的es6模块化解析取消，不加的话与html-loader冲突，src会变成object module

name:‘[hash:10].[ext]’,//取图片hash的前十位与扩展名来命名

}

},{

test:/.html$/,

loader:‘html-loader’,//用来解析html

}

]

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS

• JavaScript

• 前端框架

• 前端性能优化

• 前端监控

• 模块化+项目构建

• 代码管理

• 信息安全

• 网络协议

• 浏览器

• 算法与数据结构

• 团队管理

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

码管理

• 信息安全

• 网络协议

• 浏览器

• 算法与数据结构

• 团队管理

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-y7LxesY3-1712719487540)]