2024年前端最新webpack入门速学笔记，2024年最新2024年字节跳动、阿里等大厂前端面试题

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

使用loader加载样式打包

loader可以识别css等并一起打包

新建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

}

]

},

//配置插件

plugins:[

new HtmlWebpackPlugin({

template:‘./index.html’

})

]

}

打包结果可以看见

热更新

使用插件

tyarn add webpack-dev-server -g

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’,//生产模式

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

output:{

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

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

},

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

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】