Webpack 入门指南：从零开始构建你的第一个项目

最新推荐文章于 2025-04-20 16:45:26 发布

吞坛子

最新推荐文章于 2025-04-20 16:45:26 发布

阅读量169

点赞数 6

文章标签： webpack 前端 node.js

本文链接：https://blog.youkuaiyun.com/m0_73659339/article/details/146251839

版权

Webpack 是现代 JavaScript 应用程序的静态模块打包工具。它将你的项目中的各种资源（JavaScript、CSS、图片等）视为模块，并通过依赖关系将它们打包成优化后的静态资源。

为什么选择 Webpack？

模块化开发: Webpack 支持 CommonJS、AMD、ES6 等多种模块化规范，方便你组织和管理代码。
代码分割: 可以将代码分割成多个 bundle，实现按需加载，提升页面加载速度。
Loader: Webpack 本身只能处理 JavaScript 文件，但通过 Loader 可以处理其他类型的文件，例如 CSS、图片等。
Plugin: Plugin 可以用于执行更广泛的任务，例如打包优化、资源管理、环境变量注入等。
强大的生态系统: Webpack 拥有庞大的社区和丰富的插件、Loader，可以满足各种开发需求。

安装 Webpack

首先，你需要安装 Node.js 和 npm。然后，在项目目录下运行以下命令：

npm install webpack webpack-cli --save-dev

创建项目结构

创建一个简单的项目结构：

my-project
├── dist
├── src
│   ├── index.js
│   └── style.css
├── package.json
└── webpack.config.js

dist: 打包后的文件输出目录。
src: 源代码目录。
package.json: 项目配置文件。
webpack.config.js: Webpack 配置文件。

编写代码

在 src/index.js 中编写简单的 JavaScript 代码：

import './style.css';

const hello = () => {
  console.log('Hello, Webpack!');
};

hello();

在 src/style.css 中编写简单的 CSS 代码：

body {
  background-color: #f0f0f0;
}

配置 Webpack

在 webpack.config.js 中配置 Webpack：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

entry: 指定入口文件。
output: 指定输出文件名称和路径。
module.rules: 配置 Loader，用于处理不同类型的文件。

运行 Webpack

在命令行中运行以下命令打包项目：

npx webpack

打包完成后，你会在 dist 目录下看到生成的 bundle.js 文件。

在 HTML 中使用打包后的文件

创建一个 index.html 文件，并引入打包后的 bundle.js 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Demo</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

打开 index.html 文件，你应该会看到页面背景颜色变成了浅灰色，并且在控制台输出了 "Hello, Webpack!"。

更进一步

以上只是一个简单的 Webpack 示例，Webpack 还有很多强大的功能等待你去探索，例如：