什么是webpack?
webpack
是前端项目工程化
的具体解决方案。
webpack的作用
它提供了友好的前端模块化
开发支持、以及代码压缩
混淆、处理浏览器端JavaScript兼容性
、性能优化
等强大的功能。让我们的工作重心放到具体的功能实现上,提高了前端开发效率和项目的可维护性。
目前vue,react等前端项目,基本上都是基于webpack进行工程化开发的。
1.安装webpack
npm install webpack@5.83.0 webpack-cli@4.10.0 -D
-D
是--save-dev
的简写
2.配置webpack
(1)项目根目录中,创建名为webpack.config.js
的webpack配置文件
,并初始化基本配置如:
module.exports = {
mode:'development'
}
mode
用来指定构建模式。可选值有development
和production
(2)在package.json
的scripts
节点下,新增dev
脚本如:
"scripts": {
"dev": "webpack"
}
scripts
节点下的脚本,可通过npm run
执行
(3)启动webpack进行项目的打包构建
npm run dev
成功运行后根目录自动多出了dist->main.js, main.js是由webpack根据我们的index.js,给我们自动生成的我们将main.js引入到html页面替换我们原先自己的index.js即可。
3.webpack打包压缩
webpack.config.js
->设置 mode: production
module.exports = {
mode:'production'
}
- 开发阶段用devolopment 打包快
- 上线阶段用procduction 体积小
run脚本的时候,先去package.json找到webpack命令,然后webpack去找到webpack.config.js配置文件然后再执行。
webpack中的默认约定
- 默认的打包入口文件为
src->index.js
- 默认的输出文件路径为
dist->main.js
可以在webpack.config.js中修改打包的默认约定:
// entry: 指定要处理哪个文件
entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
// output: 指定生成的文件存放路径
output: {
path: path.join(__dirname, './dist'), // 生成的文件 存放路径
filename: './js/bundle.js' // 生成的文件 名称
},
- 通过
entry
节点指定打包入口。通过output
节点指定打包出口
4.webpack中的插件
(1)webpack-dev-server
每当修改了源代码,webpack会自动进行项目的打包和构建。
安装
npm intall webpack-dev-server -D
配置
package.json->scripts->dev: serve
添加serve参数
"scripts": {
"dev": "webpack serve",
}
安装配置成功启动后发现并没有效果?
因为webpack-dev-server会把生成的文件放在内存中,而不是物理磁盘。
只需要在html文件中直接<script src "地址端口/文件">
,访问的是内存地址即可。
<script src="http://localhost:8080/index.js"></script>
(2)html-webpack-plugin
将作为模板
的路径复制到根目录
,放到了内存
中,在生成的index.html页面中,自动注入打包的bundle.js
文件,这样我们就不用在html中手动引入script标签了。
安装
npm intall html-webpack-plugin -D
配置
// 1.导入html插件,得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.new 构造函数,创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',
filename: './index.html'
})
module.exports = {
// 3.插件的数组,将来webpack在运行时,会调用这些插件
plugins: [htmlPlugin],
devServer: {
// 手动打包成功后,自动打开浏览器
open: true,
// 实时打包时所使用的主机地址
host: '127.0.0.1',
// 实时打包时所使用的端口号
port: 8080
},
}
template
: 指定要复制哪个页面filename
: 指定复制出来的文件名和存放路径devServer
节点: 配置后,webpack打包成功后,会自动打开浏览器,不需要我们手动了
5.loader加载器
webpack默认只能打包处理.js
结尾的文件。其他类型的文件需要调用loader加载器
才可以正常打包。
loader加载器的作用: 协助webpack打包处理特定的文件模块。
(1)css-loader
可以打包处理.css文件。
安装
npm install style-loader css-loader -D
配置
module:{
// 定义规则
rules:[
// 处理css文件的loader
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
- 在webpack.config.js配置文件中,定义所有第三方文件模块的
匹配规则
test
: 表示匹配的文件类型use
: 表示要调用的loader- use数组中指定的loader顺序是固定的,多个loader调用顺序是从后往前
当webpack发现某个文件处理不了时,会查找webpack.config.js配置文件,看module.rules数组中,是否配置了对应的加载器。
webpack把index.css文件先转交给loader(css-loader)进行处理->css-loader处理完毕后->转交给style-loader处理->处理完后发现没有下一个loader,就把处理结果转交给webpack->
webpack把style-loader处理的结果,合并到/dist/bundle.js中
(2)less-loader
可以打包处理.less文件。
安装
npm install less-loader less -D
配置
module:{
// 定义规则
rules:[
// 处理less文件的loader
{test:/\.less$/,use:['style-loader','css-loader','less-loader']
]
}
(3)url-loader
可以打包处理图片相关路径。
安装
npm install url-loader file-loader -D
配置
module:{
// 定义规则
rules:[
// 处理图片文件的loader
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=8' }
]
}
?
之后是loader的参数项limit
用来限定图片的大小,单位是字节(byte
)- 只有
<=limit
大小的图片,才会被转为base64
格式的图片 - 使用base64字符串格式,在请求img标签时,就顺带把这个图片给请求下来了,不需要额外请求去拿图片下来
- base64的优点: 防止页面发起不必要的请求。性能优化
(4)babel-loader
打包处理js文件中的高级语法。
安装
npm install babel-loader @babel/core @babel/plugin-proposal-decorators -D
配置
module:{
// 定义规则
rules:[
// 处理js高级语法的loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
- webpack只能打包处理一部分高级的js语法。对于那些webpack无法处理的高级js语法,需要
借助babel-loader进行打包处理。 exclude
: 指定排除项
,因为node_modules目录下的第三方包不需要被打包
项目根目录中,创建名为babel.config.js
的配置文件,指定babel配置项:
module.exports = {
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
Babel官网: https://babeljs.io/docs/en/babel-plugin-proposal-decorators
(5)clean-webpack-plugin
webpack每次发布时,自动删除掉dist文件夹。
安装
npm install clean-webpack-plugin -D
配置
// 1.导入自动清除dist文件夹的插件
const { CleanWebpackPlugin }=require('clean-webpack-plugin')
// 2.
module.exports = {
plugins: [new CleanWebpackPlugin()]
}
6.配置打包发布
(1)package.json->scripts节点下->新增build
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
--mode
指定的参数项,会覆盖webpack.config.js中的mode选项。
前端打包得到dist文件发给后端进行项目的上线。开发时生成的文件在内存(serve参数),发布时文件文件在物理磁盘。
7.优化图片和js的文件的存放路径
js的文件统一到js目录中,图片的文件统一放到images目录中。
(1)配置js的路径
webpack.config.js中output设置为:
filename: './js/bundle.js'
(2)配置图片的路径
webpack.config.js->loader配置项中设置:
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=8&outputPath=images' }
&
的方式添加outputPath
参数
8.Source Map
Source Map
就是一个信息文件,存储着位置信息
。
开发环境下默认生成的Source Map,记录的是生成后的代码的位置。导致运行时报错的代码行号与源代码的行号不一致。有了Source Map当调试代码时出错后,能精准定位到我们源代码的位置。
配置Source Map
// 开发模式
devtool: 'eval-source-map'
- 开发模式下建议把
devtool
的值设置为eval-source-map
,可以精准定位到具体的错误行
// 发布模式
devtool: 'nosources-source-map'
- 发布模式下建议
关闭Source Map
或者将devtool
的值设置为nosources-source-map
(显示行号,但不显示源码), - 这样可以防止源码
泄漏
,提高了安全性
。
9.设置src为源目录
resolve: {
alias: {
'@': path.join(__dirname, './src/')
}
}
- 建议使用
@
表示src
源码目录,从外往里找其他文件;不要使用../../
从里往外找了 - 告诉webpack,@符号表示src这一层目录
webpack.config.js
配置文件:
package.json配置文件