1. 在网页中会引用哪些常见的静态资源?
- 样式表 .css/.less/.scss
- JS文件– .js/.ts
- 图片 .jpg/.jpeg/.png/.gif/.bmp/.svg/.webp
- 字体文件 .eot/.ttf/.woff/.woff2/.svg
- 模板文件 .vue/.jsx
2. 网页中引入的静态资源多了以后有什么问题???
- 对网页性能不友好:要发起很多的静态资源请求,降低页面的加载效率,用户体验差;
- 对程序开发不友好:前端程序员要处理复杂的文件之间的依赖关系;
3. 如何解决上述两个问题
- 对于 JS 文件 或 CSS 文件,可以合并和压缩;小图片适合转 Base64 格式的编码;
- 通过一些工具webpack,让工具自动维护文件之间的依赖关系;
4. 什么是webpack?
- 什么是webpack:webpack 是前端项目的构建工具;前端的项目,都是基于 webpack 进行 构建和运行的;
- 什么项目适合使用webpack:
- webpack 非常适合与单页面应用程序结合使用;
- 不太适合与多页面的普通网站结合使用;
- 为什么要使用webpack:
- 如果项目使用 webpack 进行构建,我们可以书写高级的ES代码,且不用考虑兼容性;
- webpack 能够优化项目的性能;
- 基于webpack,程序员可以把 自己的开发重心,放到功能上;
- 根据官网的图片介绍webpack打包的过程
- webpack官网
5. 在项目中安装和配置webpack
webpack 就是前端的一个工具,这个工具,已经被托管到了NPM官网上;
-
新建一个项目的空白目录,并在在终端中,
cd
到项目的根目录,执行npm init -y
初始化项目 -
装包:运行
cnpm i webpack webpack-cli -D
安装项目构建所需要的webpack
-
打开
package.json
文件,在scripts
节点中,新增一个dev
的节点:"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack" },
-
在项目根目录中,新建一个
webpack.config.js
配置文件,内容如下:// 这是 使用 Node 语法, 向外导出一个 配置对象 module.exports = { mode: 'production' // production development }
-
在项目根目录中,新增一个
src
目录,并,在src
目录中,新建一个index.js
文件,作为webpack 构建的入口
; -
在项目根目录中,新增一个
dist
目录 -
在终端中,直接运行
npm run dev
启动webpack进行项目构建;
6. 初步使用webpack
构建项目
使用上述步骤尝试打包src文件夹下的js文件
7. 实现webpack
的实时打包构建
-
借助于
webpack-dev-sever
这个工具,能够实现 webpack 的实时打包构建; -
运行
cnpm i webpack-dev-server -D
安装包 -
打开
package.json
文件,把scripts
节点下的dev
脚本,修改为如下配置:"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" },
-
修改
index.html
文件中的script
的src
, 让 src 指向 内存中根目录下的/main.js
<script src="/main.js"></script>
8. 使用html-webpack-plugin
插件配置启动页面
-
装包
cnpm i html-webpack-plugin -D
-
在
webpack.config.js
中,导入 插件:// 导入 html-webpack-plugin,从而帮我们自动把 打包好的 main.js 注入到 index.html 页面中 // 同时,html-webpack-plugin 可以把 磁盘上的 index.html 页面,复制一份并托管到 内存中; const HtmlPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlPlugin({ // 传递一个配置对象 template: './src/index.html', // 指定路径,表示 要根据哪个物理磁盘上的页面,生成内存中的页面 filename: 'index.html' // 指定,内存中生成的页面的名称 })
-
把 创建好的
htmlPlugin
对象,挂载到plugins
数组中:// webpack 这个构建工具,是基于 Node.js 开发出来的一个前端工具 module.exports = { mode: 'development', // 当前处于开发模式 plugins: [htmlPlugin] // 插件数组 }
9. 实现自动打开浏览器、热更新和配置浏览器的默认端口号
--open
自动打开浏览器--host
配置IP地址--port
配置 端口号--hot
热更新;最新的代码,以打补丁的形式,替换到页面上,加快编译的速度;
10. 打包处理非js
文件
-
使用 ES6 模块化规范,导入 样式表
-
默认,webpack 只能帮我们打包处理js类型的文件,非JS后缀名的文件,webpack默认处理不了。如果webpack 发现有处理不了的文件类型,则 尝试去查找,是否安装了对应的loader,来处理这种文件类型;
-
如果有,则调用 对应的loader加载器, 帮webpack处理这种文件类型; 当第三方 loader 处理完以后,会把 处理的结果,返回给 webpack 进行 打包合并;
-
如果没有合适的第三方loader则报错;
10.1 使用webpack打包css文件
-
运行
cnpm i style-loader css-loader -D
-
在
webpack.config.js
配置文件的导出对象上,新增一个module
对象节点,在 对象中,新增一个rules
数组,格式如下:module: { // 所有非JS结尾的文件类型模块,都在这里进行配置 rules: [ // 文件处理规则 { test: /\.css$/, use: ['style-loader', 'css-loader'] } // 配置 所有 CSS 文件的 处理 loader ] }
10.2 使用webpack打包less文件
-
运行
cnpm i less-loader less -D
-
在
rules
中新增一个规则:{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // 处理 less 文件的 loader
10.3 使用webpack打包scss文件
-
运行
cnpm i sass-loader node-sass -D
-
在
rules
中新增一个规则:{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 处理 scss 文件的loader
10.4 使用webpack处理css中的路径
-
运行
cnpm i url-loader -D
-
在
rules
中新增一个规则:{ test: /\.jpg|jpeg|png|gif|svg$/, use: 'url-loader' } // 处理 样式表中 图片路径的loader
10.5 使用babel处理高级JS语法
-
运行命令安装两套包:
-
第一个套命令:
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
-
第二套命令:
cnpm i babel-preset-env babel-preset-stage-0 -D
-
-
添加
rules
规则:{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 处理JS高级语法的loader ; 注意: 一定要添加 exclude 排除项,把 node_modules 目录排除
-
在项目根目录中,添加一个
.babelrc
配置文件:{ "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] }
10.6 处理 字体文件路径问题
-
还是使用
url-loader
进行处理 -
添加
rules
规则:{ test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' }, // 处理 字体 文件的 loader
-