webpack模块打包工具
一、webpack基本概念
1.1 为什么学习webpack
1.减少文件数量
2.缩减代码体积
3.提高浏览器打开的速度
1.2 webpack基本概述
webpack本质是一个第三方模块包,用于分析,并打包代码(识别代码,翻译,压缩,整合打包)
支持所有类型文件的打包
支持less/sass==>css
支持ES6/7/8==>ES5
压缩代码,提高加载速度
二、webpack使用步骤
2.1 安装使用yarn
npm install -g yarn
2.2 环境准备
1.初始化包环境 得到package.json文件
yarn init
2.安装依赖包
yarn add webpack webpack-cli -D
3.配置scripts (自定义命令)package.json中
"scripts":{
"build":"webpack"
}
2.3 webpack基础使用
默认入口:src/index.js
默认出口:dist/main.js
需要引入到入口的文件才会参与打包
执行package.json里build命令, 执行webpack打包命令
2.4 webpack再次打包
确保在src/index.js引入和使用
重新执行yarn build命令
三、webpack的配置
3.1 webpack-入口和出口
配置文档 https://webpack.docschina.org/concepts/#entry
1.新建webpack.config.js
2.填入配置
const path = require('path');
module.exports = {
entry: './src/main.js',//入口
output: {
path: path.resolve(__dirname, 'dist'),//出口路径文件夹名称
filename: 'bundle.js',//出口文件的名字(代码打包到这里)
},
};
3.修改入口文件名
4.执行yarn build命令
3.2 yarn build执行流程图
执行webpack命令, 找到配置文件, 入口和依赖关系, 打包代码输出到指定位置
3.3 案例-隔行变色
webpack打包后的js需要重新引入到html中使用
3.4 webpack打包html文件
html-webpack-plugin插件
配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/
1.下载插件
yarn add html-webpack-plugin -D
2.webpack.config.js添加配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',//入口
output: {
path: path.resolve(__dirname, 'dist'),//出口路径文件夹名称
filename: 'bundle.js',//出口文件的名字(代码打包到这里)
},
plugins: [new HtmlWebpackPlugin({ //plugins插件设置
template: './public/index.html' //告诉webpack使用插件时,以我们自己的html文件作为模板生成dist/html文件
})],
};
3.5 webpack打包css文件
webpack默认只能打包js文件
使用加载器
css-loader 文档: https://webpack.docschina.org/loaders/css-loader/
style-loader文档: https://webpack.docschina.org/loaders/style-loader/
1.下载加载器
yarn add css-loader style-loader -D
2.webpack.config.js配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...其他代码
module: {//加载器
rules: [ //规则数组形式
{ //具体的规则对象
test: /\.css$/i, //匹配css结尾的文件 i是忽略大小写
use: ["style-loader", "css-loader"],//从右到左 不能颠倒顺序
//css-loader:webpack解析css文件 把css代码一起打包进js中
//style-loader:把css代码插入到DOM上(style标签)
},
],
},
};
3.执行打包命令
css代码被打包进js文件中
style-loader会把css代码插入到head下style标签内
3.6 webpack打包less文件
less-loader文档: https://webpack.docschina.org/loaders/less-loader/
less-loader作用: 识别less文件
less 作用: 将less编译为css
1.下载加载器
yarn add less less-loader -D
2.webpack.config.js配置
const path = require('path');
module.exports = {
module: {//加载器
rules: [ //规则数组形式
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
};
3.执行打包命令
3.7 webpack处理图片文件
webpack无法自己处理图片文件
webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader
文档: https://webpack.docschina.org/guides/asset-modules/
webpack.config.js配置
const path = require('path');
module.exports = {
module: {//加载器
rules: [ //规则数组形式
{ //图片文件的配置 仅支持webpack5
test: /\.(gif|png|jpeg)/,
type: 'asset', //匹配上面的文件后,webpack会把 他们当作静态资源处理打包
//如果设置asset模式 以8kb大小区分图片文件
//如果小于8kb的 把图片文件装成base64 打包进js
//如果大于8kb的 直接把图片文件输出到dist下边
},
],
3.8 webpack加载文件优缺点
图片翻译成了base64, 放到了js文件中
好处: 浏览器不用发请求了,直接可以读取, 速度快
坏处: 图片太大,再转base64就会让图片的体积增大 30% 左右, 得不偿失
3.9 webpack处理字体图标
webpack.config.js配置
const path = require('path');
module.exports = {
module: {//加载器
rules: [ //规则数组形式
//字体文件的配置
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource',//所有的字体图标文件 都输出到dist下
generator: { //生成文件的名字 -定义规则
filename: 'fonts/[name].[hash:6][ext]',//[ext]会替换成.eot 或.woff
}
}
],
},
};
3.10 webpack对JS语法降级
babel官网: https://www.babeljs.cn/
babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/
babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法
babel-loader: 可以让webpack转译打包的js代码
1.在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
2.下载加载器
npm install -D babel-loader @babel/core @babel/preset-env
3.配置到webpack.config.js
const path = require('path');
module.exports = {
module: {//加载器
rules: [ //规则数组形式
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,//不去匹配这些文件夹下的文件
use: {
loader: 'babel-loader', //使用这个loader处理js文件
options: { //加载器选项
presets: ['@babel/preset-env'] //预设:@babel/preset-env降级规则-按照这里的规则降级js语法
}
}
}
],
},
};
4.执行打包命令
四、webpack开发服务器
4.1 为什么借用webpack开发服务器
每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s)
4.2 webpack-dev-server模块使用
webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/
1.下载模块化
yarn add webpack-dev-server
2.自定义webpack开发服务器启动命令serve – 在package.json里
"scripts": {
"build": "webpack",
"serve": "webpack serve",
"dev": "webpack --mode development"
},
3.webpack.config.js中设置mode为development
module.exports = {
"mode": 'development',
};
4.启动当前工程里的webpack开发服务器
yarn serve
5.重新编写代码, 观察控制台和浏览器是否自动打包和更新
4.3 webpack-dev-server配置
webpack-dev-server配置文档:https://webpack.docschina.org/configuration/dev-server/
在webpack.config.js中添加如下配置即可