一 基础概念
Webpack 是什么？
答：现代javascript构建工具，静态资源打包工具
什么叫构建 ？ 构建就是把我们在开发环境写的代码，转换成生产环境的代码。构建过程应该包括 预编译、语法检查、词法检查、依赖处理、文件合并、文件压缩、单元测试、版本管理等
Vite 利用 浏览器 支持ES module
二 核心概念 （二八原则）
-
entry 入口文件，可以是一个或者多个。表示从这个入口文件开始资源整合，形成一个完整的静态资源引用图。
entry: {
index: ['babel-polyfill', path.join(__dirname, '../src/index.tsx')],
},
-
output 出口文件 ，表示打包出来的bundle 文件输出到哪里，默认是在 ./dist 目录下
//filename 指列在 entry 中，打包后输出的文件的名称。
//chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称
output: {
filename: '[name].[contenthash].js',
publicPath: 'https://assets.mockplus.cn/cc/idoc/', // 配置为CDN地址
chunkFilename: '[name].[contenthash].js',
},
- loader 模块转化工具，默认webpack 只能处理js 和 json文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。
ile-loader : 处理js中 使用 require 动态加载资源文件（图片、文本等等资源，他会转化为一个内存地址提供出来，有点类似 URL.createObjectUrl）
Url-loader:
file-loader: 将文件打包到输出路径，并将打包后的路径返回。 url-loader：文件大于limit设置的值（单位为字节）时，和file-loader打包的方式一样。但如果文件小于limit设置的值时，不会将文件打包到输出路径，而是将文件内容转成base64的字符串放在js文件中。
'cache-loader' ：放在最前面
'thread-loader'：放在最后面（多线程打包）
module: {
rules: [
{
test: /.tsx?$/, // 哪些文件能够被匹配上
exclude: /(node_modules|dist)/, // 排除某些文件
use: [ // 使用loader插件进行处理，顺序是 从后到前
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
configFile: 'tsconfig.json',
},
},
],
}
]
}
- Plugin 插件 ，loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务
包括：打包优化，资源管理，注入环境变量 等
// html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。
// 在模版html文件中可以通过 htmlWebpackPlugin.options.lang 来获取对应传递的属性值
plugins: [new HtmlWebpackPlugin({
template: './src/index.html' ,
title: '墨客',
lang:'zh-cn'
})],
// 并且在 模版html文件中，使用类似模版语法，可以动态加载某些标签
<% if (htmlWebpackPlugin.options.test) { %>
<%} %>
- mode 模式 ，development/ production 。默认是 production ，有 tree-shake，js代码压缩等自带的优化
Loader
Babel-loader - 处理ts文件，js文件 （高版本->低版本）
Sass-loader -> postcss-loader -> css-loader - (style-loader) (css压缩.loader)
File-loader 将文件打包
Devtool
Dev-server
学习目标
- Webpack 的基本概念，构建工具，打包工具，api，用法等
- Idoc 项目打包文件-代码拆分 splite-chunk。 优化初始化白屏加载速度
- 将index.js 以及 第三方包拆出来
- 画板和单页 实现单独拆分
- zip.worker.ts 进行拆分，以及其他的基础包进行拆分
- dev-server 环境 , 构建和 热更新速度 优化
- 自定义 loader、plugins 开发小工具。 （fiture 开发的 es-lint，代码检查工具）