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 URI(base64字符串)
25.用户登录 - 完成功能
request.js导出(默认导出)
alert.js导出(命名导出)
将其他js代码导入到index.js
打包后的js代码:
检验:
登陆成功
错误验证码