为什么要学习Webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有人有会Webpack，可成为核心竞争力
- 高阶前段必经之路，实现“模块化和一致性”
一、什么是Webpack
我们都知道前端项目是由很多资源构成的。而在很久以前人们是靠手动管理这些资源的，这对开发效率有很大的影响。因此出现了很多的工程化工具——本质上是一种前端资源编译、打包工具。
二、安装Webpack
1.安装
先要安装 webpack ，和 webpack-cli 的包
在 Terminal 一栏输入
npm i -D webpack webpack-cli
i 是 install ,-D 是 --save-dev 的缩写，表示开发时依赖，只在项目开发阶段用到。
2.编辑配置文件
创建一个webpack.config.js文件
至少要定义entry,output
// 导入path模块
const path = require('path')
// webpack配置
module.exports = {
// 配置打包入口文件
entry: 'main.js',
// 配置打包输出位置，及文件名
output: {
path: path.join(__dirname, './dist'),
// 输出文件名
filename: '[name].js'
},
/* module: {
rules:[{
test:/\.less$/i,
use: ['style-loader','css-loader','less-loader']
}],
},*/
};
3.执行编译命令
npx webpack
4.核心流程
-
入口处理
从
entry文件开始，启动编译流程。 -
依赖解析
根据
require或import等语句找到依赖资源。 -
资源解析
根据
module配置，调用资源转移器，将png,css资源等非标准JS资源转化为JS内容。 -
资源合并打包
将转移后的资源内容合并打包为可直接在浏览器运行的JS文件。
递归调用2、3直到所有文件处理完毕
三、使用Webpack
Webpack的使用都围绕“配置”展开，配置大致分为两类：
- 流程类：作用于流程中或若干环节，直接影响打包效果。
- 工具类：除主流程外，提供更多工程化能力的配置项。
1.流程类
- 输入
entry,context - 模块解析
resolve,externals - 模块转译
module - 后处理
optimization,mode,target
1.处理css
-
安装Loader
npm add -D css-loader style-loader
- 添加
module处理css文件
在上述配置文件中加入(代码注释部分)
module: {
//css处理器
rules:[{
//处理什么文件后缀
test:/\.css$/i,
//处理用的loader
use: ['style-loader','css-loader','less-loader']
}],
},
2.处理 Babel
- 安装依赖
npm i -D @babel/core @babel/preset-env babel-loader
- 声明产物出口
module: {
rules:[{
//处理什么文件后缀
test:/\.js?$/i,
//处理用的loader
use: [{
loader:'babel-loader',
options: {
presets: [
[
'@babel/preset-env'
]
]
}
}, ]
}],
},
- 执行
npx webpack
3.生成HTML
- 安装依赖
npm i -D html-webpack-plugin
- 声明产物出口
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()]
- 执行
npx webpack
2.工具类
1.HMR
用于模块热替换（实时更新）
- 开启HMR
module.exports = {
devServe: {
hot: true
},
};
- 启动Webpack
npx webpack serve
2.Tree-Shaking
用于删除Dead Code
Dead Code
- 没有用到的代码
- 只读不写的代码
- 执行结果不会被用到的代码
- 模块导出了，但未被使用
- 开启Tree-Shaking
module.exports = {
mode: "production",
optimization: {
usedExports: true,
},
};
- 启动Webpack
npx webpack serve
