前言
2022年已经到来，身为互联网这个大时代团体的一员，新年制定新目标，对自己的技术查漏补缺也是至关重要的，身为一名开发者，如果你想在团队中脱颖而出，那么你就必须要去深刻的认知下我们疏漏的知识体系，经常打交道的webpack构建工具，系统学习掌握还是至关重要的。
本文的总结来自于
极客时间-玩转webpack专栏的学习记录！
课程地址：time.geekbang.org/course/intr…
如有觉得文章有不妥之处，笔者会加以改进，欢迎留言！！！
课程大概学习章节目录大概如下：
- 基础篇：webpack 与构建发展简史
- 基础篇：webpack 基础用法
- 基础篇：webpack 进阶用法
- 进阶篇：编写可维护的 webpack 构建配置
- 进阶篇：webpack 构建速度和体积优化策略
- 原理篇：通过源码掌握 webpack 打包原理
- 实战篇：编写 Loader 和插件
- 实战篇：React 全家桶 和 webpack 开发商城项目
第一章：基础篇：webpack 与构建发展简史
先抛出一个问题：为什么需要构建工具？
- 转换 ES6 语法
- 转换 JSX
- CSS 前缀补全/预发处理器
- 压缩混淆
- 图片压缩
初识webpack
webpack 默认配置文件：webpack.config.js，可以通过 webpack --config 指定配置文件
初识webpack的组成：entry、output、mode、modeule、plugins
module.exports = {
entry: './src/index.js', // 1.打包的入口文件
output: './dist/main.js', // 2.打包的输出文件
mode: 'production', // 3.打包环境
module: { // 4.loader的配置
rules: [
{ text: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [ // 5.plugin插件配置
new HtmlwebpackPlugin({
template: './public/index.html'
})
]
}
环境配置：安装Node.js和Npm
-
安装 nvm：github.com/nvm-sh/nvm
- 通过curl 安装：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash - 通过wget 安装：
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
- 通过curl 安装：
-
nvm的使用，nvm是什么？做什么用？如何安装Node？
- nvm是一款管理node版本的工具，可以安装多个版本的node进行切换
nvm install v10.15.3 # nvm install xxx nvm list # 可查看安装的node版本列表 nvm use xxx # 选择要使用的node版本 查看是否安装成功：node -v , npm -v
环境配置：安装webpack和webpack-cli
- 初始化项目的时候使用
npm install --save-dev webpack webpack-cli
webpack初体验
- 基础准备
- 创建文件夹 webpack-first
- npm init -y
- npm install --save-dev webpack webpack-cli
// 初体验文件目录：
node_moudels
public
index.html
src
helloworld.js
index.js
package.json
webpack.config.js
- webpack.config.js 代码
'use strict';
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
mode: 'production'
};
- helloworld.js 代码
export function helloworld() {
return 'Hello World!';
}
- index.js 代码
import { helloworld } from './views/helloworld';
document.write(helloworld());
- package.json 添加配置
{
"name": "webpack-first",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1"
}
}
- 执行命令
npm run build
- 大功告成的最后一步
- 接下来可以看到生成了dist文件目录有个
bundle.js - 手动创建
index.html文件手动引入bundle.js文件,浏览器打开即可看到构建效果<body> <script src="[./bundle.js](./bundle.js)"></script> </body>
- 接下来可以看到生成了dist文件目录有个
第二章：基础篇：webpack 基础用法
核心概念 Entry 的用法
- 单入口：entry是一个字符串
module.exports = {
entry: './src/.index.js'
}
- 多入口：entry是一个对象
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
}
核心概念之 Output
- Output 用来告诉 webpack 如何将编译后的文件输出到磁盘
module.exports = {
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
}
}
- Output 的用法：多入口配置
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
},
output: {
path: path.join('[name]', 'dist'),
filename: '[name].js',
}
}
核心概念之 Loaders
webpack 开箱即用只支持 JS 和 JSON 两种文件类型, 通过Loaders去支持其他文件类型并且把它们转化成有效的模块, 并且可以添加到依赖图中。 本身是一个函数, 接受源文件作为参数, 返回转换的结果。
- 常见的 Loaders 有哪些?
| 名称 | 描述 |
|---|---|
| babel-loader | 转换ES6、ES7等JS新特性语法 |
| css-loader | 支持.css文件的加载和解析 |
| less-loader | 将less文件转换成css |
| ts-loader | 将ts转换为js |
| file-loader | 进行图片、字体等的打包 |
| raw-loader | 将文件以字符串的形式导入 |
| thread-loader | 多进程打包js和css |
- Loaders用法
const path = require('path');
module.exports = {
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
]
}
};
核心概念之 Plugins
插件用于 bundle 文件的优化，资源管理和环境变量注入, 作用于整个构建过程
