webpack-526互联

一基础概念
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