Webpack
2022/6/23 23:23:15
本文主要是介绍Webpack,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
webpack
webpack-cli -v npm install webpack -cli -g
webpack是前端项目工程化的具体方案
- 前端模块化开发
- 代码压缩混淆
- 处理浏览器的JavaScript的兼容性
- 性能优化
操作:
1初始化
npm init -y
2.引入jquery
npm i jquery -S
问题:ES6的兼容性问题:
Uncaught SyntaxError: Cannot use import statement outside a module
安装webpack
npm i webpack@5.5.1 webpack-cli@4.2.0 -D
项目中配置webpack
1.创建webpack的配置文件
webpack.config.js
module.exports={ mode:'development' }
2.新增脚本dev
"scripts": { "dev":"webpack"//scrip节点下的脚本可以通过 npm run 执行 例如npm run dev },
mode的可选值
development
- 开发环境
- 不会对打包生成的文件进行压缩和性能优化
- 打包速度快,适合在开发阶段
production
- 生产环境
- 会对打包的生成的文件进行代码压缩和性能优化
- 打包速度很慢,仅适合在项目发布阶段使用
webpack.config.js
- 打包前会先读取配置文件的内容,基于配置文件打包
- webpack是基于node.js开发出来的打包工具,因此在它的配置文件中,支持使用node.js相关的语法和模块进行webpack的配置
webpack的默认约定
- 默认打包的入口文件为:src-->index.js
- 默认的输出为文件路径为dist---->main.js
entry-->指定打包的入口
output----->指定打包的出口
webpack的插件
拓展webpack的能力
- webpack-dev-server
- 类似与node.js阶段用到的nodemon工具
- 每当修改了代码,webpack都会自动的进行项目的打包
- html-webpack-plugin
- webpack中的html插件(类似模板引擎插件)
- 可以通过此插件来自定制index.htm页面的内容
webpack-dev-server自动监听
npm i webpack-dev-server@3.11.0 -D
1.需要修改webpack中的dev命令
"scripts": { "dev": "webpack serve" },
打包的文件去哪了?
1.不配置会放到物理磁盘上
2.打包的会放到内存上,默认放到项目的根目录中
<script src="/bundle.js"></script>
html-webpack-plugin
npm i html-webpack-plugin@4.5.0 -D
配置:
const path = require('path'); //导入html插件,得到一个构造函数 const HtmlPlugin =require('html-webpack-plugin'); //创建HTML的插件实例对象 const htmlPlugin = new HtmlPlugin({ template:'./src/index.html',//源文件的存放路径 filename:'./index.html',//指定生成文件的存放路径 }) module.exports={ mode:'development', entry:path.join(__dirname,'./src/index.js'), output:{ path:path.join(__dirname,'./dist'), filename:'bundle.js' }, plugins:[htmlPlugin] }
注意点:
1.也是将index.html放到了内存中,会自动的注入webpack-dev-server生成的js文件
2.删除dist文件不会影响正常运行
devServer节点
devServer:{ open:true, host:'127.0.0.1', port:80 }
Loader
webpack只能默认打包处理.js后缀的结尾的文件
协助webpack打包处理特定的文件模块
-
css-loader可以打包处理.css相关的文件
npm i style-loader@2.0.0 css-loader@5.0.1 -D
module:{
rules:[//文件后缀名的匹配规则
{
test:/.css$/,use:['style-loader','css-loader']
}
]
}
顺序不能反,先后后前。先css-loader然后是style-loader -
less-loader可以打包处理.less相关的文件
npm i less-loader@7.1.0 less@3.12.2 -D -
babel-loader可以打包处理webpack无法处理的高级的js语法
解决url的资源
npm i url-loader@4.1.1 file-loader@6.2.0 -D
小图片变成base64
npm i babel-loader@8.2.1 $babel/core@7.12.3 @babel/plugin-proposal-class-propertries@7.12.1 -D
为什么要打包?
因为要把内存的文件变成实际的文件
"scripts": {
"dev": "webpack serve",
"build":"webpack --mode production"
},
1.自动清理dist文件
npm install claen-webpack-plugin@3.0.0 -D企业打包发布:
- 生成打包报告,根据报告分析具体的报告
- 为第三方库启用CON加载
- 配置组件的按需加载
- 开启路由懒加载
- 自定首页内容
source map
devtool:"eval-source-map",
实际又不用配置webpack
CUI工具
这篇关于Webpack的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升