Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 a3bbc54f 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 72f83522
显示空白变更内容
内联 并排
Showing with 341 addition and 6 deletion
blog/webpack/index.md
浏览文件 @ a3bbc54f
# Webpack5实战教程
# Webpack4实战教程
尚硅谷新版Webpack5实战教程(从入门到精通)
尚硅谷新版Webpack4实战教程(从入门到精通)
https://www.bilibili.com/video/BV1e7411j7T5
尚硅谷前端Webpack5教程（高级进阶篇）
尚硅谷前端Webpack4教程（高级进阶篇）
https://www.bilibili.com/video/BV1cv411C74F
尚硅谷2022版Webpack5入门到原理
https://www.bilibili.com/video/BV14T4y1z7sw
笔记分享:
https://lab.puji.design/webpack-getting-started-manual/
笔记分享: https://lab.puji.design/webpack-getting-started-manual/
课件地址webpack从入门到精通
下载地址：https://pan.baidu.com/s/1JxvXF8EyG9TSNLqkc98YzQ
提取码：i5qc
课堂源码和笔记: 链接:https://pan.baidu.com/s/1T2g37SpIQRjF6fjFDl_YwA 密码:uw5q
## 目录
......@@ -2725,4 +2730,334 @@ $ npx webpack --config webpack.config.js
- externals cdn引入
- dll
https://www.bilibili.com/video/BV1e7411j7T5?p=32&spm_id_from=pageDriver
https://webpack.docschina.org/
## 7、详细配置
### 7.1、entry
基本的配置
```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'development'
}
```
entry
- string 单入口 输出一个文件，打包chunk默认名：main
```js
entry: './src/index.js'
```
- array 多入口，最终行成一个chunk, 使用场景：html热更新
```js
entry: ['./src/index.js', './src/add.js']
```
- object 多入口，有几个入口文件就输出几个chunk，chunk名称是key
```js
entry: {
index: './src/index.js',
add: './src/add.js'
}
```
```js
entry: {
// 多个入口最终生成一个chunk
index: ['./src/index.js', './src/count.js']
// 生成一个chunk
add: './src/add.js'
}
```
### 7.2、output
```js
output: {
// 文件名称（目录 + 名称）
filename: 'js/[name].js',
// 所有资源输出的公共目录
path: path.resolve(__dirname, 'dist'),
// 所有输出资源引入公共路径前缀
publicPath: '/'
// 非入口chunk的名称
chunkFilename: [name]_chunk.js,
// 整个库对外暴露的变量名
library: '[name]',
// 变量名添加到哪个变量上 window(browser), global(node)
libraryTarget: 'window', // 'global'、'commonjs'
},
```
### 7.3、module
```js
module: {
rules: [
// loader配置
{
test: /\.css$/,
// 多个loader用use
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.js$/,
// 排除node_modules文件夹下文件
exclude: /node_modules/,
// 只检查src下的js文件
include: path.resolve(__dirname, 'src'),
// 单个loader用loader
loader: 'babel-loader',
// 优先执行
exforce: 'pre',
// 延后执行
// exforce: 'post',
// 参数配置
options: {}
},
// 以下配置只会生效一个
oneOf: []
]
}
```
### 7.4、resolve
```js
// 解析模块的规则
resolve: {
// 配置解析模块路径别名，
// 优点：编码时简写路径
// 缺点：没有路径提示
alias: {
'@': path.resolve(__dirname, 'src')
},
// 配置省略文件路径的后缀
extensions: ['.js', '.json', '.css'],
// 告诉webpack解析模块去哪个目录找
modules: ['node_modules']
}
```
### 7.5、devServer
```js
devServer: {
// 运行代码的目录
contentBase: resolve(__dirname, 'dist'),
// 监视contentBase目录下文件，一旦变化就reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 启动gzip压缩
compress: true,
// 端口号
port: 5000,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启HMR
hot: true,
// 不要显示启动服务器日志信息
clientLogLevel: 'none'
// 除了一些基本启动信息外，其他内容都不要显示
quiet: true,
// 如果出错，不要全屏提示
overlay: false,
// 服务器代理，解决开发环境跨域问题
proxy: {
// 一旦接收 /api 开头的请求，就会把请求转发到另一个服务器
'/api': {
target: 'http://localhost:3000',
// 发送请求时，请求路径重写, 去掉 /api
pathRewrite: {
'^/api': ''
}
}
}
}
```
### 7.6、optimization
```js
output: {
chunkFilename: 'js/[name].[contenthash:10]_chunk.js'
}
optimization: {
// 提取公共代码
splitChunks: {
chunks: 'all',
// 一下均为默认值，可以不写
// 分割的chunk最小为30kb
minSize: 30 * 1024,
// 最大没有限制
maxSize: 0,
// 要提取的chunk最少被引用1次
minChunks: 1
// 按需加载时并行加载文件的最大数量
maxAsyncRequests: 5,
// 入口文件最大并行请求数量
maxInitialRequests: 3,
// 名称连接符
automaticNameDelimiter: '~'
// 可以使用命名规则
name: true,
// 分割chunk的组
cacheGroups: {
// node_modules 文件会被打爆到vendors组的chunk中：verdors~xxx.js
// 满足上面的公共规则，如：大小超过30kb，至少被引用1次
verdors: {
test: /[\\/]node_modules[\\/]/,
// 优先级
priority: -10
},
default: {
// 至少被引用2次
minChunks: 2,
// 优先级
priority: -20,
// 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
reuseExistingChunk: true
}
}
},
// 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
// 解决：修改a文件，导致b文件的contenthash变化，导致缓存失效
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
// 配置生产环境的压缩方案：js和css
minimizer: [
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启动source-map
sourceMap: true
})
]
}
```
math.js
```js
export function add(x, y){
return x + y;
}
```
index.js
```js
import('./math.js').then(({add})=>{
console.log(add(1, 2));
});
```
## 8、webpack5 vs webpack4
`@next` 未来发布版
- 自动删除Node.js Polyfill: V5不自动加载node.js模块
- chunk和模块ID 添加了新的算法
- chunkID 命名规则优化
- Tree Shaking 能够处理嵌套模块、多模块关系、commonjs
- output V4只输出ES5,V5支持ES5
- SplitChunk js和css大小单独划分
- Caching 磁盘存储
- 监视输出文件 看是否变化再决定要不要输出全部文件
- 添加了默认值
## 9、总结
五个核心概念
- entry
- output
- loader
- plugins
- mode
开发环境
- 样式 css-loader style-loader less-loader
- HTML html-loader
- 图片
- 其他资源
- devServer
生产环境
- 提取css成单独文件
- css兼容性处理 postcss
- 压缩css
- js语法检查 eslint
- js兼容性处理 babel
- js压缩
优化配置
- HMR
- source-map
- 开发环境：eval-source-map / eval-cheap-module-source-map
- 生产环境：source-map / cheap-module-source-map
- oneOf
- 缓存 hash chunkhash contenthash
- tree shaking
- code split
- 多入口
- 单入口
- import
- lazy loading （import）
- pwa workbox
- 多进程打包 thread-loader
- externals cdn
- dll
详细配置
- entry
- output
- module
- resolve
- devServer porxy
- optimization splitChunks、runtimeChunk、minimizer
2022.05.24 完成学习
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或