持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
webpack相关配置学习：
entry
指定webpack打包⼊⼝⽂件: Webpack 执⾏构建的第⼀步将从 Entry 开始，可抽象成输⼊
// 入口
// spa：单页面应用
// mpa：多页面应用 多入口 对应 多出口
// entry: "./src/index.js",
entry: {
// index: modules = [index.js, a.js] = [chunk, chunk] = chunks
// index == chunkName
index: "./src/index.js", // index.js a.js index.css
login: "./src/login.js" // login.js
},
output
打包转换后的⽂件输出到磁盘位置:输出结果，在 Webpack 经过⼀系列处理并得出最终想要的代码后输出结果
// 出口
output: {
// 生成的资源存放的位置, 必须是绝对路径
path: resolve(__dirname, './build') ,
// 生成的资源文件名
// filename: 'index.js' // 占位符 [name]
filename: '[name][chunkhash:8].js' // 占位符 [name]，⽂件名称不要重复
},
mode
Mode⽤来指定当前的构建环境
- production
- development
- none 设置mode可以⾃动触发webpack内置的函数，达到优化的效果
- 开发阶段的开启会有利于热更新的处理，识别哪个模块变化
- ⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能
loader
Webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。
在 require() 语句中使用 loadername! 作为前缀的方式来使用 loader，或者在 webpack 配置中配置 regex 来自动应用它们 。
webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，和处理⽅式就需要loader了
常见loader：
style-loader 将模块导出的内容作为样式并添加到 DOM 中
css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码
less-loader 加载并编译 LESS 文件
sass-loader 加载并编译 SASS/SCSS 文件
ts-loader 像加载 JavaScript 一样加载TypeScript 2.0+
babel-loader 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
moudle
模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。 Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。
module: {
rules: [
{
test: /\.css$/,
// use: ['style-loader', 'css-loader'] // 执行顺序：自后往前
use: [miniCssPlugin.loader, 'css-loader'] // 执行顺序：自后往前
}
]
}
Plugins
插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件。
webpack 插件是一个具有 apply方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在 整个 编译生命周期都可以访问 compiler 对象。
