vue3.0-webpack
html-webpack-plugin plugin插件意思
项目开发完成后需要使用webpack对项目进行打包发布的原因:
-
前端工程化指的是？
在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的”四个现代化”
-
四个现代化是什么？
模块化、组件化、规范化和自动化
-
目前主流的前端工程化解决方案？
webpack和parcel
-
webpack的主要功能是？
提供友好的前端模块化开发，以及代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化等强大功能
好处：把工作的重心集中到具体功能实现上，提高前端开发效率以及项目的可维护性。
实现步骤：
- 在根目录终端中输入npm init -y 目的：初始化包管理文件（注意所在位置文件夹名不能包含中文），这个操作是初始化package.json
- 新建目录src，程序员所写的代码一定要放到src之下
- 下载jquery操作文本 npm i jquery -s
- 由于使用ES6运行jquery在浏览器中会有兼容性的问题，所以使用webpack
在终端安装 npm install webpack@5.5.1 webpack-cli@4.3.0 -D（cli要下载最新版本）
-
配置webpack
webpack.config.js是webpack的配置文件，基于node.js开发出来的打包工具，在打包之前会先读取这个配置文件，基于配置进行打包
①在根目录下，创建webpack.config.js的webpack配置文件，初始化基本配置：
modult.exports={
mode:’development’//mode 用来指定构建模式，可以有development和production 在开发阶段一般都是development,上线时production
}
②在webpack.json的scripts节点下，新增dev脚本如下：
把scripts中的修改成”dev”:”webpack” //script 节点下的脚本，可以通过npm run执行，例如 npm run dev
③在终端中运行npm run dev命令，启动webpack进行项目的打包构建
-
mode节点中两个可选值的区别是什么？
①development
开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合开发阶段
②production
生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度慢，仅适合发布阶段
-
webpack的默认约定
①默认打包入口文件为src->index.js
②默认输出文件路径是dist->main.js
可以在webpack.config.js中修改打包的默认约定
const path=require('path')
module.exports=
{
// 指定打包的入口
entry:path.join(__dirname,'./src/index.js'),
output:
{
//输出文件的存放路径
path:path.join(__dirname,'./dist'),
//输出文件的名称
filename:'bundle.js'
},
mode:'development'
}
注意：每次修改都要打包才能实现 npm run dev
由于每次修改都要去打包所以使用安装webpack插件
最常用的webpack插件如下：
-
webpack-dev-server
node.js阶段用到nodemon工具
每当修改源代码、webpack会监听项目源代码的变化，从而自动进行打包和构建
运行命令：npm install(或者i) webpack-dev-server@3.11.0 -D（注意1：一般要安装最新版本
npm i webpack -cli）
-
html-webpack-plugin plugin插件意思
webpack中的HTML插件（类似于一个模板引擎插件）
可以通过此插件自定制index.html页面的内容
-
如何配置webpack-dev-server
修改package.json->scripts中dev命令：
在原本webpack命令后加上serve，即：”dev”:”webpack serve”
再次运行npm run dev就会自动打包
在浏览器中访问http://localhost:8080地址，查看自动打包效果
webpack-dev-server启动一个实时打包http服务器
注意2：使用ctrl+点击 无法打开准确网址，会报错（Cannot GET/）
在webpack.config.js中添加如下代码
devServer:
{
static{directory:path.join(__dirname,’/’),},
}
打开后还是没有变化是因为没有放到实际物理磁盘而是在内存中，不是实时打包的文件
实时打包的文件没有放到dist/bundle.js文件中，其中的是旧文件所以读取不对
作用：
不在根据output节点指定的路径，存放到实际的物理磁盘上
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
-
生成到内存中的文件该如何访问呢？
webpack-dev-server生成内存文件，默认放到项目根目录中，虚拟、不可见的
引用使用： <script src="/bundle.js"></script> //因为放在根目录下面生成（内存） 不可见/虚拟的
-
如何配置html-webpack-plugin
需求：通过html-webpack-plugin插件，将src目录下index.html首页，复制到项目根目录中一份（在实时监听下退出按两次ctrl+c）
安装插件npm install html-webpack-plugin@4.5.0 -D（下载最新版本，不要下载这个版本）
卸载插件npm uninstall xx
配置html-wenpack-plugin
在wepack-config.js中
①const HtmlPlugin=require(‘html-webpack-plugin’);//获取构造函数
②const htmlPlugin=new HtmlPlugin({//创建HTML插件的实例对象
template:’./src/index.html’,//指定源文件的存放位置
filename:’./index.html’,//指定生成问价的存放位置
})
在module.exports={
plugins:[htmlPlugin],
}
-
html-webpack-plugin的两个注意点
①文件被复制到项目根目录中，内存里面
②生成的index.html页面的底部，自动注入打包的bundle.js文件（前面的就不用引入，会自动生成，删除dist文件夹不会影响正常运行）
- devServer节点
在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多配置
例如：
devServer:{
open:true,//初次打包完成，自动打开浏览器
host:’127.0.0.1’,//实时打包所使用的主机地址
port:80,//实时打包使用的端口号
}
webpack中的loader
在实际开发中，webpack只能打包处理.js后缀的模块，其他模块webpack默认处理不了，因此需要调用loader加载器才能正常打包否则会报错
作用：协助webpack打包处理特定的文件模块
css-loader 打包处理.css相关的文件
less-loader 打包处理.less相关的文件
babel-loader 打包处理webpack无法处理的高级JS语法
注意3：在webpack中一切皆为模块，.css,.less,图片都可以根据import进行导入，导入后可以正常生效
但是因为在js中还没有loader可以处理css后缀的文件所以会报错
安装loader
npm i style-loader css-loader -D
配置loader
在webpack.config的module->rules数组中添加
module:{//所有第三方文件的匹配规则
rules:[{//文件后缀名的匹配规则
test:/\.css$/,use:[‘style-loader’,’css-loader’]//test表示文件匹配类型（正则表达式，意思是以css结尾的文件都使用css-loader或style-loader运行）
},{ }
//还有对象就{ }放里面
]
}
style.loader css.loader
注意：use数组中loader顺序固定的，多个loader的调用顺序：从后往前调用（要不然会报错）并且修改了配置文件都要重启打包
打包处理less文件
在js中引入less import’./css/index.less’
安装less-loader
npm i less-loader less -D
Webpack.config.js的module->rules数组，添加loader规则
如上而在rules数组中通再添加一条规则
test:/\.less$/,use:[‘style-loader’,’css-loader’,’less-loader’]
注意4：在rules数组中的对象需要{}包裹每一条test对象
打包处理样式表中url路劲相关的文件
- 打包图片怎么进行压缩混淆呢？
直接写url没有报错，版本不同的原因
不过还是要安装url-loader插件
npm i url-loader file-loader -D
在rules中写入
{test:/\.jpg|png|gif$/,use:’url-loader?limit=22229’}
//limit参数 ?表示要传参，limit指的是图片的体积<=22229才会被转成参数项
limit用来指定图片的大小，单位是字节（byte）
只有<=limit大小的图片，才会被转成base64格式的图片
第一种失效
loader的另一种配置 第二种方法
use:{
loader:’url-loader’,//通过loader属性指定要调用loader
options:{ limit:22229}
}
第二种失效
打包处理js文件中的高级语法
webpack只能打包处理一部分高级的javascript语法，对于哪些webpack无法处理的高级js语法，需要借助babel-loader进行打包处理。
class Person{
//通过static关键字，为Person类定义一个静态属性info
//webpack 无法打包处理“静态属性”这个高级语法
static info=’person info’
}
console.log(Person.info);
没有报错，新版本也兼容了这个问题
但是还是要安装babel-loader包
npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D
失效
打包发布
-
项目开发完成后需要使用webpack对项目进行打包发布的原因:
①开发环境下，打包生成的文件存放到内存中，无法获取最终打包生成的文件，无法上线
②开发环境下，打包生成的文件不会进行代码压缩混淆和性能优化
-
怎么进行配置？
在package.json文件的scripts节点下，新增build命令如下：
添加”build”:”webpack --mode production”//项目发布时，运行build命令
--mode是一个参数项，用来指定webpack运行模式，production代表生成环境，会对打包生成的代码压缩和性能优化
注意5：通过 --node指定的参数项，会覆盖webpack.config.js中的module选项
执行npm run build // 就进行了代码压缩混淆构建，但是dist文件夹下的文件存放比较杂乱所以需要整理
①javascript文件统一生成在js目录中
修改output中filename:’js/bundle.js’//统一生成在dist文件夹下的js子目录中
注意6：每次打包不会把旧文件清除掉，每次打包前手动清除dist目录
-
那么如何清除dist目录下的旧文件呢？
安装clean-webpack-plugin
导入const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’)
const cleanPlugin=new CleanWebpackPlugin()
//挂载到plugins节点中
plugin:{htmlPlugin,cleanPlugin},//挂载插件
②把图片统一生成到image目录中
在图片中新增outputPath:’image’
企业级打包发布：
①生成打包报告，根据具体报告分析具体的优化方案
②Tree-Shaking
③为第三方库启用CDN加载
④配置组件的按需加载
⑤开启路由懒加载
⑥自定制首页内容
-
生成环境遇到的问题：（生产环境会遇到什么问题）
压缩混淆代码后代码除错（debug）困难
①变量被替换成没有语义的名称
②空行和注释被剔除
使用source Map
Souce Mpa是一个信息文件，里面储存着位置信息，储存代码混淆前后的对应关系
出错时除错工具会直接显示原始代码，而不是转换后的代码，方便后期调试
开发环境下，webpack默认启用Source Map功能，在控制台直接显示错误行的位置，定义到具体的源代码
-
但是为什么会有行数偏差？
因为Sources Map默认是转换生成后的代码位置
-
如何解决行数偏差？
Webpack.config.js中配置添加devtool:’eval-source-map’
在生产环境下省略devtool选项，最终文件不包含Source Map防止原始代码以Source Map的形式暴露
可以把devtool设置为nosources-source-map只定位行数不泄露源代码，提高网址安全性