目录
前言
webpack明明在各大脚手架中都配好了，个人想要自定义配置无疑费时费力，不过奈何面试总会问，还是要掌握一些基础，做个了解，针对5个核心基础概念entry（入口）、output（输出）、module（依赖loader）、plugins（插件）、mode（模式）进行一个基础记录。
依赖
需要在项目中添加webpack和webpack-cli依赖。
因为只在开发环境需要，因此-D。
npm i webpack webpack-cli -D
package.json加入打包命令"build": "webpack"，在项目根目录执行yarn build或npm run build即可执行webpack打包。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", ... "build": "webpack" },
核心概念
- 配置文件命名为webpack.config.js，我用的es的模块，其他模块同理。
- 主要配置在config中，entry（入口）、output（输出）、module（依赖loader）、plugins（插件）、
mode（模式）。
const config = { entry: { main: './index.js', other: './other.js' },//或''或[] output: { filename: "[name].js", }, module: { rules: [ { test:..., use:... }, { test:..., use:... }, ], }, plugins: [...], mode: "production",//或development }; export default config;
1.entery（入口）
- 可以填写三种形式：
- 对象，键值对指明入口地址，属性为名称，在出口output中可以用[name]获取属性名。
entry: { main: "./index.js", other: "./other.js" },
字符串，单个入口可以直接用字符串填写入口路径，名称默认为main。
entry: './index.js'
等同于
entry: { main: "./index.js", },
数组，与对象一样可以多入口，就是数组无法区分名称。
entry: ['./index.js','./other.js']
使用对象形式时，可以对单个入口进行一些配置修饰，需要将地址再嵌套进一层对象，并在对象中加入属性进行配置。
-dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
-filename: 指定要输出的文件名称。
-import: 启动时需加载的模块。
-library: 指定 library 选项，为当前 entry 构建一个 library。
-runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
-publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。
entry: { main: { import: "./index.js", }, other: { dependOn: 'main', import: "./other.js", }, }
2.output（输出）
- 对象类型，属性filename决定打包后的文件名。
output: { filename:'bundle.js' }
打包多个文件，但是仍然只能配置一个filename，入口如果是对象形式存在命名，可以使用[name]。
output: { filename:'[name].js' }
path指定打包文件夹，不指定的话默认打包到dist文件夹
import path from "path"; const __dirname = path.resolve(); ... output: { path: __dirname + "/otherName", filename:'[name].js' }
[contenthash]可以在名称中添加哈希随机数。
output: { filename:'[name]-[contenthash].js' }
3.module（依赖loader）
- 因为webpack默认只能打包js文件，无法识别其他文件（css、ts、less等等），module属性允许你添加loader处理不同的其他文件。
- 每个loader都得单独下载依赖，例如css。
npm i css-loader -D
module，对象格式，rules属性是数组格式，里面每个对象两个属性test与use，test正则匹配文件名，use填写对应的loader。
module: { rules: [ { test: /.css$/, use: "css-loader" }, { test:..., use:... }, ], },
可以写成对象形式，好处是可以添加options对应loader的配置，至于有哪些内容要查相关文档。
module: { rules: [ { test: /.css$/, use: { loader: "css-loader",options: {...} } }, ], },
use可以配置成数组，意思是对一种文件要使用多种loader处理，注意，顺序是从下至上开始，下面例子先执行css-loader、再执行style-loader。
module: { rules: [ { test: /.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, ] }, ], },
4.plugins（插件）
- loader无法处理所有的事，因此我们需要各种插件完成剩下的一些功能。
- 例子，例如打包和压缩处理html文件。
npm i html-webpack-plugin -D
import webpack from "webpack"; import HtmlWebpackPlugin from "html-webpack-plugin"; ... plugins: [ new webpack.ProgressPlugin(), new HtmlWebpackPlugin({ template: "./index.html" }), ],
5.mode（模式）
可选值有none、development、production（默认），一般只用到后两种。
development开发模式打包后会存在一些webpack注释，用于开发时使用。（会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名）
production生产模式，打包内容很干净。（会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin ）
