Webpack 入门只看这一篇就够了(图文＋代码)
什么是 Webpack？
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当我们在开发过程中使用 JavaScript，CSS，图片等资源时，Webpack 会将这些资源视为模块，然后将它们组合成一个或者多个打包文件，最终在浏览器中加载和执行。它可以有效地提高页面的加载速度，并优化资源的使用。
Webpack 的特点
- 模块化：Webpack 允许我们使用模块化的编程方式来组织代码。
- 支持多种资源：除了 JavaScript，Webpack 还支持 CSS、图片、字体等多种资源。
- 热更新：在开发模式下，Webpack 提供了热模块替换(HMR)功能，可以在不刷新页面的情况下更新页面。
- 插件系统：通过插件，Webpack 提供了更加强大的功能，比如压缩代码、提取CSS文件等。
如何使用 Webpack
1. 初始化项目
首先需要安装 Node.js。然后在项目目录下执行以下命令来初始化项目并安装 Webpack：
mkdir my-webpack-app
cd my-webpack-app
npm init -y
npm install --save-dev webpack webpack-cli
2. 创建项目结构
在项目目录下创建以下文件结构：
my-webpack-app
├── src
│ ├── index.js
│ └── style.css
├── dist
│ └── index.html
└── webpack.config.js
src/index.js：入口文件src/style.css：样式文件dist/index.html：HTML 文件webpack.config.js：Webpack 配置文件
3. 编写代码
在 src/index.js 文件中，添加如下代码：
import './style.css';
const title = document.createElement('h1');
title.textContent = 'Hello, Webpack!';
document.body.appendChild(title);
在 src/style.css 文件中，添加如下代码：
h1 {
color: blue;
font-family: Arial, sans-serif;
}
接下来，在 dist/index.html 中添加如下基本 HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpack App</title>
</head>
<body>
<script src="../dist/main.js"></script>
</body>
</html>
4. 配置 Webpack
在 webpack.config.js 文件中，设置 Webpack 的配置：
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'main.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出路径
},
module: {
rules: [
{
test: /\.css$/, // 匹配 CSS 文件
use: ['style-loader', 'css-loader'], // 使用的 loader
},
],
},
mode: 'development' // 开发模式
};
5. 安装所需的 Loader
为了处理 CSS 文件，需要安装 style-loader 和 css-loader：
npm install --save-dev style-loader css-loader
6. 添加构建脚本
在 package.json 中添加构建脚本，方便使用命令运行 Webpack：
"scripts": {
"build": "webpack"
}
7. 运行 Webpack
执行以下命令来构建项目：
npm run build
构建完成后，在 dist 文件夹中会生成 main.js 文件。接下来，用浏览器打开 dist/index.html 文件，你会看到一行蓝色的“Hello, Webpack!”。
结语
以上就是 Webpack 的基本使用方法。通过这个简单的示例，我们可以了解到如何使用 Webpack 打包 JavaScript 和 CSS 文件。随着项目的复杂度增加，Webpack 的配置会更加灵活和复杂，但掌握基础之后，你可以逐步深入了解 Webpack 的更多功能。希望这篇文章能帮助到你！
