webpack
概念
webpack 是一个包管理工具
能够打包，压缩，混淆合并代码
基本使用
初始化
yarn init -y
初始化 package.json 文件
下包
yarn add webpack webpack-cli -D
注意，webpack 是一个打包工具，并非项目必须依赖项，所以下包必须带 -D
package.json配置命令
须在 package.json 文件的 scripts 脚本节点中配置命令
scripts:{
"dev":"webpack"
}
书写代码
默认需要在 scr/index.js 中书写代码
执行打包命令
执行 yarn dev 即可完成打包
输出文件夹为 dist/main.js 文件
配置
初始化配置项
在项目根目录创建一个 webpack.config.js 配置文件
module.exports = {
entry:'入口文件',
output: {
path: '出口文件路径',
filename:'文件名'
}
}
入口文件的路径可以是相对路径
出口文件的路径必须是绝对路径
可以通过 path 模块拼接 __dirname
cosnt path = require('path')
path:path.resolve(__dirname,'输出文件夹路径');
html文件自动拷贝插件
html-webpack-plugin
1.下包
yarn add html-webpack-plugin -D
2.导包
const HtmlWebpackPlugin = require('html-webpack-plugin');
3.在 webpack.config.js 中配置插件
module.exports = {
plugins:[
new HtmlWebpackPlugin({
template('./src/index.html')
})
]
}
loader
css-loader和style-loader
webpack 默认只能打包 js 文件，要想打包 css 的文件，需要使用 css-loader 和 style-loader
1.书写完 css 文件后需要导包到 js 文件中
import './src/index.css'
2.下包 yarn add css-loader style-loader -D
3.配置
module.exports = {
module:{
rules:[
{
test:/\.css$/i,
use:['style-loader','css-loader']
}
]
}
}
4.运行命令打包
打包完成后，webpack 会自动的在 js 中创建一个 style 标签记录其样式，以行内的形式插入到 Dom 树中
创建的 script 会多一个属性: defer ，这个属性会表示会在 DOM 元素加载完毕后再执行 js 文件
less 和 less-loader
less 文件不被 webpack 和 浏览器支持，所以需要将 less 转换成 css ，并导入 DOM 树中
1.书写 less 文件，并导入到 js 文件中
import './less/index.less'
2.下包 yarn add less less-loader -D
3.配置
module.exports = {
module:{
rules:[{
test: /\.less$/i,
use:['style-loader','css-loader','less-loader']
}]
}
}
4.运行命令打包
less-loader 需要配合 css-loader 和 style-loader 一起使用，因为在转换 less 得到 css 后，还需要 css loader 和 style-loader 配合
打包 图片
webpack5 内置了 图片所需的 loader ，无需下包即可使用
1.将图片导入 js
import './img.jpg'
2.配置文件
module.exports = {
module: {
rules :[
{
test:/\.(img|png|jpg|jpeg|bmp)&/i,
type:'asset'
}
]
}
}
3.运行命令打包
因为属于内置模块，所以调用 loader 的时候不是使用 use ，而是调用 webpack 的内置模块 asset
webpack 打包 大于 8kb 的文件会将其复制到 dist 目录下
打包小于 8kb 的文件会将其转换成 base64 格式;
base64 文件是字符串格式，在写入 css 的时候会将其一同包裹在 css 文件中，导入时也会作为字符串传递，所以在网络请求的时候，不需要额外发起一次请求去额外请求一次图片
打包字体文件
webpack 内置了 打包字体相关的 loader，无需额外下包即可使用
1.将字体文件的 css 导入 js
import './font/iconfont.css'
2.配置文件 （无需配置文件也可生效）
module.exports = {
module:{
rules:[
{
test: /\.(sov|woff|woff2|dot)$/i,
type:'asset/resource',
genarator:{
filname:'[name]-[hash:6][ext]'
}
}
]
}
}
genarator 是一个生成器，能够将源文件拷贝到 dist 文件目录下的时候对其进行 文件名的匹配命名
[name] 表示采用源文件的文件名
[hash:6] 表示在文件名后添加 hash 串，:6 能顾规定 hash 串的长度
[ext] 表示在拷贝文件后仍然采用源文件的 扩展名
es6语法降级
语法降级是为了解决低版本浏览器不兼容 新特性的 es6 语法
1.下包 yarn addbabel-loader @babel/core @babel/preset-env -D
2.配置
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
3.运行命令
开发服务
是一个提高开发效率的开发依赖包，这个依赖包能够让开发者脱离手动打包，直接在保存的时候自动打包，并根据修改的代码，生成补丁，进行热更新
hot module replacement
1.下包 yarn add webpack-dev-server
2.在 package.json中 配置
scripts : {
"serve":"webpack serve"
};
3.调用 yarn serve 命令即可
4.修改端口和首次打包自动打开页面
module.exports = {
devServer: {
port:'端口号',
open:'首次打包是否打开页面 false/true'
}
}
打包模式
webpack打包存在两种打包模式
development: 开发模式
production ：生产环境
开发模式没有进行压缩混淆，适合开发者进行开发
生产模式打包后会对文件进行压缩混淆合并，适合项目上线
需要在 module.exports 中配置
module.exports = {
module:'development/production'
};
