Webpack 入门教程摘要

Webpack的简介和安装

Webpack 是一个模块化打包工具，可以解析模块间的依赖关系并正确打包代码，支持 ES6+、LESS、SASS 等前端技术，兼容多种框架如 Vue、React 等。它不仅处理 JavaScript，还能管理静态资源如图片和样式文件。

安装 Webpack 需要本地环境支持 Node.js，并通过 npm 管理。Webpack 可全局安装或局部安装，局部版本优先级较高。使用 npm 初始化项目后，可添加 Webpack 打包配置。

Webpack 使用

项目初始化与创建

通过 npm 初始化项目后，创建必要的目录和文件，如 dist 用于存放打包结果，src 用于存放资源文件。配置入口文件和出口文件后，可使用 Webpack 命令或通过 npm 脚本打包。

CSS 文件处理

Webpack 支持样式文件处理，通过配置 style-loader 和 css-loader 实现样式加载及嵌入。需要安装对应的 loader，并在配置文件中定义规则。

图片文件处理

通过 url-loader 和 file-loader 处理图片。小于 10kb 的图片可转为 Base64 编码，大于 10kb 的图片则作为独立资源。配置文件中可定义图片命名规则和存放路径。

JS 规范兼容 Babel

ECMAScript 标准

ECMAScript 是 JavaScript 的标准，版本包括 ES5、ES6、ES7、ES8 等。ES5 是目前兼容性最好的版本，但 ES6+ 提供了更友好的语法和新特性，如 Promise。

Babel 编译器

Babel 是一种 JavaScript 编译器，可将 ES6+ 转换为向后兼容的 ES5 代码。安装 Babel 需要 babel-loader、babel-core 和 babel-preset-env，并在 Webpack 配置文件中定义规则。

配置示例

通过引入 babel-loader，设置 presets 参数，指定兼容目标浏览器版本，可实现对现代语法的转换。