Webpack相关概念
什么是webpack
本质上，webpack是一个用于javascript应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部从一个或多个入口构建一个依赖关系，然后将项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示我们的内容。
配置项概念
使用webpack需要做好相应的配置，在使用之前我们需要先了解其相关的核心概念
- 入口（entry）
- 输出（output）
- loader
- 插件（plugin）
- 模式（mode）
- 浏览器兼容性（browser compatibility）
- 环境（environment）
入口（entry）
入口起点指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是./src/index.js，但是我们可以通过配置entry属性来指定一个或多个不同的入口起点。
webpack.config.js
module.exports = {
entry: './path/src/entry/index.js'
}
输出（output）
output属性告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件。主要输出文件的默认值是./dist/main.js，其他生成文件默认放置在./dist文件夹中。
我们也可以通过在配置中指定一个output字段，来配置这些处理过程：
const path = require('path');
module.exports = {
entry: './path/src/entry/index.js',
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'webpack.bundle.js'
}
}
output还有很多可配置特性，关于output的其他用法例如hash等可查看官网输出章节
loader
webpack只能理解JavaScript和JSON文件，这是webpack开箱可用的自带能力。loader让webpack能够去处理其他类型的文件，并将它们转换成有效模块，以供应用程序使用，以及被添加到依赖图中。
loader有两个属性
test：识别出哪些文件会被转换use：定义在进行转换时，应该使用哪个loader
const path = require('path');
module.exports = {
entry: './path/src/entry/index.js',
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'webpack.bundle.js'
},
module:{
rules: [{test: /\.tet$/, use: 'raw-loader'}]
}
}
以上配置中，对module对象定义了rules属性，其中两个必须属性：test和use。告知webpack以下信息：
在碰到require()/import语句中被解析为.txt的路径时，在对它打包之前，先use（使用）raw-loader转换一下。
插件（plugin）
loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化、资源管理，注入环境变量
我们也可以通过插件接口，来扩展webpack能力。
想要使用一个插件，只需要require()，并把它添加到plugins数组中。多数插件可以通过选项自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new操作符来创建一个插件实例。
const path = require('path');
const webapck = require('webpack') //用于访问内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './path/src/entry/index.js',
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'webpack.bundle.js'
},
module:{
rules: [{test: /\.tet$/, use: 'raw-loader'}]
},
plugin: [new HtmlWebpackPlugin({ template: './src/index.html' })]
}
html-webpack-plugin为应用程序生成一个HTML文件，并自动将生成的所有bundle注入到此文件中。
模式（mode）
通过选择development，production或none之中的一个，来设置mode参数，我们可以启用webpack内置在响应环境下的优化。其默认值为production。
Webpack5运行于Node.js v10.13.0+的版本。