一、前端工程化
-
模块化(js模块化,css模块化,资源模块化)
-
组件化(复用现有的UI结构、样式、行为)
-
规范化(目录结构的划分、编程规范化、接口规范化、Git分支管理)
-
自动化(自动化构建、自动部署、自动化测试)
1. webpack的基本使用(了解)
实际开发中不需要手动配置
webpack:前端工程化的具体解决方案
1.1 手动配置webpack项目
- 创建项目文件,打开终端
npm init -y
- 安装jQuery依赖
npm i jquery -S
//1.使用ES6语法,导入jquery
import $ from "jquery"
- 在项目中安装webpack
第一种:npm install webpack@5.42.1 webpack-cli@4.7.2 -D
第二种:npm install --save-dev webpack
- 配置webpack
- 在项目根目录下创建名为webpack.config.js,并初始化基本配置
// 使用node.js中的导出语法,向外导出一个webpack配置对象
module.exports={
// 代表webpack运行的模式,可选值有两个development(开发环境)和production(生产环境),
mode:'development'
}
- 在package.json的script节点下,新增dev脚本如下
"scripts": {
"dev":"webpack"
},
终端npm run dev
可运行项目实现
- 在html中引入
<script src="../dist/main.js"></script>
main.js封装了项目的相关文件
5. 自定义打包的入口和出口
webpck4.x和5.x默认规定:
默认的打包入口文件是src->index.js ,默认的输出路口文件是dist->main.js
注意:可以在webpack.config.js中修改默认配置
entry:打包的入口
output:打包的出口
//entry:'指定要处理哪个文件'
entry:path.join(__dirname,'../src/index1.js'),
//output:'指定生成的文件要放在哪里'
output:{
// 存放到目录,默认dist
path:path.join(__dirname,'dist'),
// 生成的文件名,默认main.js
filename:'bundle.js'
}
1.2 webpack中插件的使用
- webpack-dev-server(每当修改了源代码,webpack会自动进行项目的打包和构建)
安装:npm install webpack-dev-server@3.11.2 -D
配置:
"scripts": {
"dev":"webpack serve"
},
- html-webpack-plugin(可以自定制index.html页面的内容,自动注入打包的main.js)
安装:npm install html-webpack-plugin@5.3.2 -D
配置:
// 1.导入HTML插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin=new HtmlPlugin({
template:'./src/index.html',//指定原文件存放路径
filename:'./index.html'//指定生成文件的存放路径
})
// 2. 创建HTML插件的实例对象
module.exports={
mode:'development',
plugins:[htmlPlugin],//3. 通过plugin节点,使htmlPlugin插件生效
}
- devServer节点
在webpack.config.js(修改后必须重启服务器)配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置,示例代码如下:
devServer:{
open:true,//初次打包完成后,自动打开浏览器
host:'127.0.0.1',//实时打包所使用的主机地址
port:80//实时打包所使用的端口号
//在http协议中,如果端口号是80,可以被省略
}
1.3 webpack中的loader
webpack只能处理.js文件,非.js文件需要调用loader实现打包
- 打包处理css文件
安装loader:npm i style-loader@3.0.0 css-loader@5.2.6 -D
配置(webpack-config.js):
module.exports={
module:{//所有第三方模块匹配规则
rules:[//文件后缀匹配规则
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
}
- 打包处理less文件
安装loader:npm i less-loader@10.0.1 less@4.1.1 -D
配置(webpack-config.js):
module.exports={
module:{//所有第三方模块匹配规则
rules:[//文件后缀匹配规则
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
}
- 打包处理样式表中与url路径相关的文件
安装loader:npm i url-loader@4.1.1 file-loader@6.2.0 -D
配置(webpack.config.js):
module.exports={
module:{//所有第三方模块匹配规则
rules:[//文件后缀匹配规则
{test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}
]
}
}//?之后的参数limi用来指定图片的大小,单位为字节(byte),大于该文件大小不会转为base64格式
- babel-loader处理js高级语法
安装loader:npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
配置(webpack.config.js):
module.exports={
module:{
rules:[//注意:必须使用exclude指定排除项,因为node_modules目录下的第三方包不需要被打包
{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}
]
}
}//?之后的参数limi用来指定图片的大小,单位为字节(byte),大于该文件大小不会转为base64格式
在项目根目录中创建babel.config.js的配置文件:
module.exports={
// 声明bable可用的插件
// 将来webpack在调用babel-loader的时候,会加载plugins插件来使用
plugins:[['@babel/plugin-proposal-decorators',{legacy: true}]]
}
1.4 打包发布
- 配置webpack的打包发布
在package.json文件的script节点下,新增build命令如下:
"scripts": {
"dev": "webpack serve",
"build":" webpack --mode production"
},
–mode是一个参数项,用来指定webpack的运行模式。production代表生产环境,会对打包生成的文件进行代码压缩和性能优化。
注意:–mode的参数项,会覆盖webpack.config.js的model选项
2. 优化图片和js文件路径,
// js,在output中多加一层路径
output:{
// 存放到目录,默认dist
path:path.join(__dirname,'dist'),
// 生成的文件名,默认main.js
filename:'js/bundle.js'
}
//图片,在配置url-loader的时候,多个参数之间,使用&符号进行分隔
{test:/\.jpg|png|gif$/,use:['url-loader?limit=22229&outputPath=images']},
- 配置和安装clean-webpack-plugin插件完成自动删除dist文件中的旧目录
安装:npm install clean-webpack-plugin@3.0.0 -D
配置(webpack-config.js):
//左侧的{}是解构赋值
const {CleanWebpackplugin}=require('clean-webpack-plugin')
const cleanPlugin =new CleanWebpackplugin()
module.exports={
plugins :[cleanPlugin],//挂载插件
}
1.5 SourceMap的使用
这是一个信息文件,存储着位置信息,出错的时候将直接显示源代码,而不是转换后的代码,能够极大的方便后期调试
配置:(开发环境下)
module.exports={
devtool :'eval-source-map',
}
发布时:
- 在生产环境下,省略devtool能够防止代码泄露
只定位行号,不暴露源码 - 可以把devtool设置为
nosources-source-map
1.6 webpack@的应用
@引用时的路径
webpack.config.js
resolve:{
alias{
'@':path.join(__dirname,'./src/')
}
}
例如:import msg form '@/msg.js'