webpack 指南

基本概念

module 各个源码文件，webpack中一切皆模块 只要可以引用的都是模块
bundle webpack 输出的文件叫做 bundle
chunk 多个模块的集合（在内存中还没有产出的代码块）

核心概念

1.entry (入口)
指示 webpack 从哪个文件开始打包

2.output (输出)
指示 webpack 打包完的文件输出到哪里去，如何命名等

3.loader (加载器)
webpack本身只能处理js、json等资源，其他资源需要借助loader,webpack才能解析

4.plugins (插件) 扩展 webpack 的功能

5.mode (模式) 主要有两种模式

开发模式：development 生产模式：production

SouceMap

SourceMap（源代码映射） 是一个用来生成源代码与构建后代码--映射文件的方案

常见loader

• babel-loader：把 ES6 转换成 ES5
• sass-loader：将SCSS/SASS代码转换成CSS
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
• postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
• eslint-loader：通过 ESLint 检查 JavaScript 代码
• vue-loader：加载 Vue.js 单文件组件
• thread-loader：开启多进程处理

常见Plugin

• html-webpack-plugin：简化 HTML 文件创建,自动引入打包输出的资源 (依赖于 html-loader)
• mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)
• css-minimizer-plugin: 压缩CSS（生产环境使用）
• terser-webpack-plugin: 压缩JS（生产环境使用）
• image-minimizer-plugin: 压缩图片（生产环境使用）