学习目标：
掌握打包工具的使用
学习内容：
1.下载yarn
下载使用yarn工具，window下载地址
下载地址: https://yarn.bootcss.com/docs/install/#windows-stable
mac通过homebrew安装(看上面地址里)
没有安装过，先运行homeBrew这个命令
/usr/bin/ruby -e "$(curl -fsSL http://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"
2.使用yarn
和npm类似，主要为vue做准备
1.初始化，得到package.json文件
yarn init
2.添加依赖包
命令: yarn add [package]
命令: yarn add [package]@[version]
yarn add jquery
yarn add [email protected]
3.移除包
命令: yarn remove [package]
yarn remobe jquery
4.安装项目全部依赖包，根据项目package。json记录的报名和版本，下载到当前工作中
5.全局
安装 yarn global add [package]
卸载 yarn global remove [package]
注意 global一定要在add的左边
3.webpack的使用
默认入口：./src/index.js
默认出口: ./dist/main.js
1.初始化包环境
yarn init
2.安装依赖包
yarn add webpack webpack-cli -D
3.配置scripts（自定义命令）
scripts: {
"build": "webpack"
}
4.新建目录src
5.新建src/add/add.js - 定义求和函数导出
6.新建sec/index.js导入使用
inmport * from ’ ’
7.运行打包命令
yarn build
或者 npm run build
4.webpack-入口和出口
默认入口: ./src/index.js
默认出口: ./dist/main.js
webpack配置 - webpack.config.js(默认)
- 新建src并列处, webpack.config.js
- 填入配置项
const path = require("path")
module.exports = {
entry: "./src/main.js", // 入口
output: {
path: path.join(__dirname, "dist"), // 出口路径
filename: "bundle.js" // 出口文件名
}
}
3.修改package.json，自定义打包命令，让webpack使用配置文件
"scripts": {
"build": "webpack"
},
5.自动生成html文件
1.下载插件
yarn add html-webpack-plugin -D
2.webpack.config.js
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...省略其他代码
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' // 以此为基准生成打包后html文件
})
]
}
3.重新打包，观察dist文件下是否多出一个html文件
5.1 加载器，处理css文件
style-loader
和css-loader
1.安装
yarn add style-loader css-loader -D
2.在webpack.config.js配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...其他代码
module: {
rules: [ // loader的规则
{
test: /\.css$/, // 匹配所有的css文件
// use数组里从右向左运行
// 先用 css-loader 让webpack能够识别 css 文件的内容并打包
// 再用 style-loader 将样式, 把css插入到dom中
use: [ "style-loader", "css-loader"]
}
]
}
}
3.新建src/scc
4.引入到main.js (因为这里是入口需要产生关系, 才会被webpack找到打包起来)
import "./css/index.css"
5.2加载器，处理less文件
1.下载包
yarn add less less-loader -D
2.webpack.config.js 配置
module: {
rules: [ // loader的规则
// ...省略其他
{
test: /\.less$/,
// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
use: [ "style-loader", "css-loader", 'less-loader']
}
]
}
3.引入到main.js
import "./less/index.less"
5.3加载器 - 处理图片文件
如果使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可
{ test: /\.(png|jpg|gif|jpeg)$/i, type: 'asset'}
如果你用的是webpack4及以前的, 请使用这里的配置
1.下载依赖包
yarn add url-loader file-loader -D
2.webpack.config.js 配置
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
// 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
options: {
limit: 8 * 1024,
},
},
],
}
图片转成 base64 字符串
- 好处就是浏览器不用发请求了，直接可以读取
- 坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右
3.src/assets/准备老师发的2个图文件
4. 在css/less/index.less - 把小图片用做背景图
5.在src/main.js - 把大图插入到创建的img标签上, 添加body上显示
5.4.webpack加载文件优缺点
图片转成 base64 字符串
- 好处就是浏览器不用发请求了，直接可以读取
- 坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右
5.5webpack-dev-server自动刷新
1.下载包
yarn add webpack-dev-server -D
2.配置自定义命令
scripts: {
"build": "webpack",
"serve": "webpack serve"
}
3.运行命令，起到webpack服务器
yarn serve
#或者 npm run serve
5.4.1如果要单独配置端口
module.exports = {
// ...其他配置
devServer: {
port: 3000 // 端口号
}
}
学习产出：
webpack的配置和导出，vue项目启动的基本包