网站做新浪图床,公众号在哪里找,网页游戏传奇世界,删除重装wordpress16.什么是webpack? 压缩#xff1a;把代码文件的体积缩小
整合#xff1a;把多个CSS文件、JS文件整合成一个#xff0c;减少用户浏览器的http请求次数#xff0c;从而让用户更快访问我们的网页
转译#xff1a;less、sass转换成css#xff0c;高版本js降级处理等 时间… 16.什么是webpack? 压缩把代码文件的体积缩小
整合把多个CSS文件、JS文件整合成一个减少用户浏览器的http请求次数从而让用户更快访问我们的网页
转译less、sass转换成css高版本js降级处理等 时间过程中出现报错可能是路径问题 如
检查发现是终端执行位置导致问题应在src所在文件夹执行 也可以配置合适的webpackage.config.js
const path require(path);
//配置文件就是一个js文件通过Node中的模块操作向外暴露一个配置对象。
module.exports {entry: path.join(__dirname, ./index.js),//入口,要使用webpack打包那个文件。output: {//输出文件的配置path: path.join(__dirname, ./dist),//指定到那个目录中去filename: bundle.js//指定输出文件的名称}
}17.修改 Webpack 打包入口和出口
默认的入口文件src/index.js
默认的出口文件dist/main.js 概念 | webpack 中文文档 (docschina.org) 配置文件的代码在node环境中执行为了保证在任何地方执行都能找到文件使用绝对路径。
path.resolve和path.join
5.2.0版本的webpack可以清空输出目录后打包生成 18.用户登录 - 长度判断 19.自动生成 html 文件 关于插件
HtmlWebpackPlugin | webpack 中文文档 (docschina.org)
template filename 下包找包 配置包
如果是写相对路径会以出口目录作为起点 打包 生成的html文件中js文件引入路径书写
插件源代码会根据filename的路径分析
去匹配出口路径output.path 这个出口目前来看是指js文件的出口
匹配到后在该基础../拼接output.filename 如果filename路径中不包含出口路径
一直向上层级匹配检索
建议打包输出内容filename都在出口文件夹下面 可正常运行 20.打包 css 代码
css-loader | webpack 中文文档 (docschina.org)
style-loader | webpack 中文文档 (docschina.org) 加载器从右到左依次使用所以先是css后style顺序不能颠倒 为什么不用变量和from去接收
—— 引入webpack就会处理下面不需要使用可以省略 下载css-loader和style-loader 配置webpack.config.js 打包后的html文件并没有引入css文件 css代码被打包到出口文件index.html
代码经过压缩是给浏览器运行不是给程序员阅读 运行后样式生效 下载bootstrap 引入bootstrap 表单等样式生效 21.优化-提取 css 代码
将原本嵌入在js文件中的css代码提取出来作为独立的一个文件
单独的css文件可以让浏览器缓存起来减少js文件体积让浏览器下载更快
浏览器可以并行下载css和js让网页更快显示在用户眼前。 该插件在css-loader文档中有关联 MiniCssExtractPlugin | webpack 中文文档 (docschina.org) 也可以在百度进行相关搜索使用新版webpack对答案发布时间进行控制确认插件的名字 打包进了main.css 上面的是bootstrap的css代码 下面是index.css代码 我们在webpack的入口文件引入的相关css代码被单独提取到一个css文件中 并且在html文件中被引入 生效 22.优化-压缩过程
bootstrap的css代码本就被压缩过而手写的css代码提取后没有经过压缩 CssMinimizerWebpackPlugin | webpack 中文文档 (docschina.org) 下包-配置包-打包后看到新包中的手写css代码被压缩 js代码不受影响保持压缩 样式生效 23.打包 less 代码 使用miniCssExtractPlugin.loader代替style.loader 24.打包图片 目的减少http请求次数 准备一张大图一张小图 不能直接给img的src属性赋值路径webpack会当成普通字符串原封不动打包 注意js 中引入本地图片资源要用 import 方式如果是网络图片http地址字符串可以直接写 打包后大图发送一个文件小图导出data URIbase64字符串 25.用户登录 - 完成功能 request.js导出默认导出 alert.js导出命名导出 将其他js代码导入到index.js 打包后的js代码 检验
登陆成功 错误验证码
