Webpack官方中文文档
今日在使用Vue3提供开箱即用环境中发现许多问题需要自己配置，一气之下直接爆肝Webpack官方文档，此篇为自己的学习笔记总结。

WebPack定义

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容

官方的说法太过笼统和概括，用比较容易理解的话就是。
Webpack是一个前端集成开发环境，根据入口指引提供一系列包括但不限于打包、压缩、检测等功能的强大工具，并且可以根据开发需要灵活配置几乎所有环境和属性。

基本概念

entry

入口文件，定义一个项目的起点。
通常情况下我们会将所使用的东西打包引入到项目根里面的main.js/index.js。
Webpack会根据你的入口指引和关系链挨个挨个引入你所需要的文件。

output

输出配置，简易的说法就是打包开发者环境的文件的输出位置。
同时Webpack还提供了强大的API，可以帮助你进行文档编码、压缩、标识。

plugin

顾名思义、插件。webpack开源插件十分多且功能十分强大。
Vue3提供的开箱即用里面就包含了热重载插件，就是你经常用的npm run serve。
常用的插件挺多，比如eslint语法检查、热重载、文件自动挂载等等。后面会详细介绍。

loader

这是Webpack提供的最强大的功能了，loader可以理解为加载器。
loader可以让前端开发者更关注于代码本身而不是复杂的浏览器兼容、压缩等头痛问题。
常见的兼容性问题、SASS\LESS编译问题，ES语法转换问题不应当成为开发的主要问题
Webpack的loader提供一系列功能让前端开发人员更专注代码本身。常见的loader有SASS\LESS-loader，babel、file-loader、css-loader等。

mode

mode其实就是开发环境设置，webpack将开发环境分为开发环境（development）和产品环境(production)。环境影响打包后的代码体积与压缩。通俗的说开发环境更适合本地调式，其保留注释和日志等非功能性代码，而产品环境会帮你将这部分去掉从而压缩体积。

webpack配置

首先强调下，webpack是基于node搞出来的环境，所以本质上是适配commonjs语法，对ES 语法不支持。
同时webpack本身提供将css文件、静态资源文件引入JS文件使用。
这是一个不好的使用习惯，后续会介绍为什么
下载webpack和webpack-cli之后直接按照流程创建一个工作环境即可。
安装和使用这里直接略过，不会的朋友建议看看顶部官方中文文档，十分简单。
webpack.config.js
理论上webpack创建以后会自动有这个文件。具体的配置都将会写在里面。

module.exports={
    mode,
    entry,
    output,
    plugins,
    //module就是配置loader的地方
    module,
    
}

mode配置

    //mode:'production'
    mode:'development'

entry配置

entry官方文档
对于初学者来说，直接配置单入口文件即可。待基础学习完之后可参考官方文档深入，包括多入口，依赖，时间限制等等。
entry: './src/index.js',

output配置

output官方文档最基本的配置包括输出位置、输出文件名字
强烈建议使用node的path模块生成绝对路径

    entry:{
        filename:'',
        path:'',
    }

module配置

这是webpack最重要的一点。
loader官方文档

module:{
    rules:[
        //这里配置loader
    ]
}

常见的loader比如cssloader，postcss（兼容处理）,sassloader此类都在这里配置。
使用规则如下：

首先下载loader包。 npm xxx-loader
根据需求配置到module里面
根据具体需求配置loader，比如你想生产环境压缩代码之类的。每个loade使用方法不一，建议参考官方文档。这里实例最简单的css配置 style-loader可将打包后的文件插入到html里面
cnpm i css-loader style-loader

module:{
    rules:[
    {
        test: /\.css$/,
                // 从右往左执行 这里可以执行各种
                // MiniCssExtractPlugin.loader可以分包css
                use: [
                     'style-loader', 
                    /*MiniCssExtractPlugin.loader,*/
                    'css-loader',
                ]
    
    }
    ]
}

常见的还有postcss（用于兼容性处理）
sassloader(将sass编译成css)
babel（这个不用多说好吧，js兼容处理）
具体的使用建议上webpack官网搜索对应loader。

plugins配置

官方文档这里给大家介绍一下常用的插件及其使用方法。

plugins:[]

html-webpack-plugin

webpack官方文档
此插件可自动将所有打包文件引入到html里，避免你手动引入。同时可以压缩html
原来你需要在html里面写script src=''
但是现在你不用写任何东西，它会自动引入。
多入口文件处理可以查阅官方文档，这里不深入只讲基础。
使用方法

首先npm下载html-webpack-plugin.
cnpm i html-webpack-plugin -D
在Webpack.config.js中引入。
const HtmlWebpackPlugin = require('html-webpack-plugin');
插件注册

plugins:[
    new HtmlWebpackPlugin({
            //模板文件，打包之前的html文件
            template: './src/index.html',
            //输出文件，打包后的html文件
            filename: 'app.html',
            //script标签插入位置
            inject: 'body',
            //压缩配置
            minify: {
                //压缩空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true,
            }
        })
]

css-minimizer-webpack-plugin

官方文档
顾名思义，css压缩插件。
使用流程和上述一下，这里讲解下简单配置。
此插件提供一个loader，放置在css\sass\lessloader的最前即可。

MiniCssExtractPlugin

官方文档此插件用于分包，将css文件单独压缩成文件避免文件全部被压缩到js文件中造成js体积太大。使用方法参考上述。
最基础的要配置一个filename（打包后的css文件名）

HtmlWebpackPlugin

官方文档
此插件用于热重载，监视源文件的变化并加载到内存中，不会打包。这里就和vue提供的打包命令相似。
CLI命令：npx webpack serve

Webpack 5学习笔记，学会如何配置、压缩、优化。