Webpack 入门教程

184 2024-07-19

我们非常重视原创文章，为尊重知识产权并避免潜在的版权问题，我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容，访问作者的公众号页面获取完整文章。

查看原文：Webpack 入门教程

文章来源：

springboot葵花宝典

扫码关注公众号

Webpack 入门教程摘要

Webpack 简介和安装

Webpack 是一个模块化打包工具，它可以转化和兼容多种前端技术，如 ES6/7/8、CSS 预处理器（LESS、SASS）、前端框架（Vue、React、Angular）和 JS 语言改进（CoffeScript、TypeScript）等。它还支持管理静态资源，如图标和雪碧图。使用 Webpack 前，需要安装 Node.js 和包管理工具 npm。Webpack 可以全局或局部安装，局部安装的版本优先级更高，并且可通过 npm 以开发依赖的形式安装。

Webpack 使用

项目初始化后，通过运行 npm init 创建项目结构，包括 dist 目录存放打包结果，src 目录存放资源文件，以及项目首页 index.html。通过配置 webpack.config.js 文件，指定入口和出口，然后运行 npm run build 命令进行打包。例如，js 模块通过 module.exports 导出，用 require 引入。

CSS 文件处理打包

CSS 文件通过安装 style-loader 和 css-loader 进行处理打包。在 webpack.config.js 中配置相应的 loader 和规则，如使用 url-loader 和 file-loader 处理图片文件。配置后，可再次运行 npm run build 进行打包。

JS 规范兼容 Babel

ECMAScript (ES) 是 JavaScript 的标准，不同版本的 ES 在浏览器兼容性方面有所不同。Babel 是一个 JavaScript 编译器，用于将 ES6+ 代码转换为兼容较旧浏览器的 ES5 代码。通过配置 babel-loader，安装 babel-core 和 babel-preset-env，可在 webpack.config.js 中添加规则，使新的 JS 语法兼容旧版浏览器。