webpack是什么？
从概念上来说，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 当 webpack 处理应用程序时，通过分析模块间的依赖关系，在其内部构建出一个依赖图(dependency graph)，最终编绎输出模块为它们均为 HTML、JavaScript、CSS 以及各种静态文件（图片、字体）等，用于展示你的内容。
从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着 高度可配置性，可以很好满足你的需求。
核心概念：
-
1.入口(entry)
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。默认值是 ./src/index.js。可以通过配置entry属性来指定。
-
2.输出(output)
告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。可以通过配置output属性来指定。
-
3.loader
webpack 开箱可用的自带能力就是只能理解到JS、JSON文件，loader让webpack能够去处理其他类型的文件，并将他们转换为有效模块。
-
4.插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
使用插件 先需要require它，然后把它添加到plugins 数组中。
-
5.模式(mode)
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
-
6.浏览器兼容性(browser compatibility)
Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。
-
7.环境(environment)
Webpack 5 运行于 Node.js v10.13.0+ 的版本。
注意：
webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入插件
module.exports = {
mode: 'production',
entry: './path/to/my/entry/file.js', //入口
output: { //输出
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
//loader 两个属性 test 属性:识别出哪些文件会被转换
// use 属性:定义出在进行转换时，应该使用哪个 loader
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
//需要new一个实例
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
那原理是什么捏?
首先给大家解释下，模块捆绑器。 模块捆绑器 将 小块代码 编译成 更大和更复杂的代码,可以运行在Web浏览器中.
那到底是怎么捆绑的呢？
我们的打包程序将从该 入口文件 开始,并尝试理解 它 依赖于哪些文件。然后，它会尝试了解哪些文件，依赖关系取决于它，它会继续这样做，直到它发现， 我们应用程序中的 每个模块，以及它们如何 相互依赖。
这种对项目的理解被称为依赖图。
如何生成依赖图捏 ？
首先是从入口文件开始，去找当前文件所在的目录，然后去遍历入口文件的依赖，由相对路径生成绝对路径，去获取子节点的内容以及依赖关系。
得到依赖图之后，会将其转换成一个可以在浏览器中运行的包。
至于怎么根据文件去获取相关内容？
由于js会编译成ast (抽象语法树)，然后，可以通过遍历ast来试着理解这个模块依赖哪些模块. 要做到这一点,我们检查ast中的每个 import 声明。
详细的可以看这 minipack-explain的explain.md
我觉着解释的非常清楚。
常用的 打包插件下载
gzip压缩 下载指令：
npm install compression-webpack-plugin --save-dev
配置：
new CompressionWebpackPlugin({
// [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径，[query] 会被替换成查询字符串
filename: "[path][base].gz",
// 压缩成gzip
algorithm: "gzip",
// 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体做压缩
test: /.js$|.css$|.html$|.ttf$|.eot$|.woff$/,
// 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
threshold: 10240,
// 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
minRatio: 0.8,
})
图片资源压缩 下载指令：
npm install --save-dev image-webpack-loader
代码压缩 下载指令：
npm install uglifyjs-webpack-plugin --save-dev --legacy-peer-deps
配置：
// 代码压缩
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
}, //生产环境自动删除console
compress: {
drop_debugger: true,
drop_console: true, //注释console
pure_funcs: ["console.log"], // 移除console
},
},
sourceMap: false, //是否启用文件缓存
parallel: true, //使用多进程并行运行来提高构建速度
})
