webpack快速基础
1. 概念
webpack是现代JavaScript 静态模块打包工具。在打包时它会从一个或多个入口点构建依赖图。然后将你项目中每个模块生成一个或多个bundles, 生成的均为动态资源。
依赖图：每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。webpack官网说明。
webpack核心概念为：入口、输出、loader、插件、模式。
1.1 入口
顾名思义，指示webpack使用那个模块作为构建依赖图的开始，webpack会将此文件作为入口构建依赖图。
入口可以有一个或多个，默认为 src/index.js, 可以点开webpack源码看一下。
module.exports = {
entry: './path/to/my/entry/file.js',
// 下面为举例
entry: ['src/index.js', 'src/main.js'],
entry: {
index: 'src/index.js',
main: 'src/main.js',
},
};
1.2 输出(output)
output 告诉webpack 编译生成的所有bundles,资源文件等输出到那个位置，默认是项目根目录的 dist 文件夹。
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'), // 配置 output生成坐在的目录
filename: 'my-first-webpack.bundle.js', // 配置生成文件后 文件的名字。该文件会放到path文件夹下。
},
};
1.3 loader
webpack只能理解JavaScript与json文件，这时webpack自身的能力，其他的一些文件就需要各种各样的loader来理解解析成webpack可以理解的js或json. 以供webpack将这些资源添加到依赖图中。
loader在webpack配置文件的 module -> rules 节点下配置
loader配置中有两个常用属性 test、use
test： 识别出哪些文件会被转换。用正则表达式来匹配
use: 定义出在进行转换时，应该使用哪个 loader, use 后是一个字符串数组，数组内是定要使用的loader, 数组顺序一定要确定，webpack会从后往前依次使用loader来转换代码或资源。
例如：txt文件
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
1.4 插件（plugin)
loader用于转换某种类型的模块，而插件工作范围更广，例如：打包优化，资源管理，注入环境变量等。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 非常常用的插件，用户生成前端项目的起始页面
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
2. 建立项目，用于测试功能
2.1 安装webpack，
先初始化文件夹的npm，npm init
npm i -D webpack webpack-cli # 我的 "webpack": "^5.90.3", "webpack-cli": "^5.1.4"
2.2 创建webpack配置文件,
根目录创建 webpack.config.js，再根目录创建 src/index.js 文件夹与文件
const { Configuration } = require('webpack');
/**
* @type { Configuration } 指定配置类型，可帮助代码提示
*/
module.exports = {
mode: 'development', // 开发模式
entry: './src/index.js', // 程序入口
}
2.3 配置package.json，运行项目
"scripts": {
"dev": "webpack --config webpack.config.js" // 启动脚本 --config 指定webpack启动配置文件
},
src/index.js中写几行代码，运行 dev，查看是否成功，生成的文件到了dist目录下。
3. 配置 mode 开发环境
webpack的mode配置有 development 或 production，
development:开放环境开发过程中使用, process.env.NODE_ENV会是 development
production：正式打包环境，提供了一些混淆等功能process.env.NODE_ENV会是 production
4. 配置 entry 编译入口
入口必须配置，entry就可配置。一般我们就配置一个入口也就够了
entry: './src/index.js'
entry: ['./src/index.js', './src/index-two.js'] // 可以以数组形式配置多个
entry: { // 已js对象的形式配置，会编译生成已对象属性名为名字的js文件
home: './src/index.js',
homeTwo: './src/index-two.js'
},
5. 配置 output 编译出口
output: {
filename: 'js/[name]-[fullhash:8].js', // 编译输出文件名,前面带 js/:表示生成到js目录下
path: path.resolve(__dirname, 'dist'), // 编译输出根目录，上面配置的js目录就会生成到这个目录下
clean: true, // 编译是否清理输出目录。删除旧的文件
}
6. 配置加载css
因为纯webpack只处理js文件，所以我们需要依赖各种loader来处理其他文件，处理css需要使用 style-loader css-loader
下载包后配置，都是在webpack配置文件的 module -> rules 下
module: {
rules: [
{
test: /\.css$/i, // test通过 正则表达式匹配需要loader的文件
use: ['style-loader', 'css-loader'], // use 配置使用的loader，顺序一定要正确。
}
],
},
webpack在使用loader时是按照use配置顺序 从后向前依次处理。
