知识库

Appearance

Return to top
On this page

Webpack 快速入门

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

安装 Webpack

首先，你需要在项目中安装 Webpack：

bash
# 初始化项目
npm init -y

# 安装 Webpack 和 Webpack CLI
npm install --save-dev webpack webpack-cli

基本配置

创建一个基本的 webpack 配置文件 webpack.config.js：

javascript
const path = require('path');

module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 输出文件名
    path: path.resolve(__dirname, 'dist')  // 输出目录
  }
};

项目结构

典型的项目结构如下：

my-webpack-project/
├── package.json
├── webpack.config.js
├── src/
│   ├── index.js
│   └── utils.js
└── dist/
    └── bundle.js

简单示例

让我们创建一个简单的示例：

src/utils.js

javascript
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

src/index.js

javascript
import { add, multiply } from './utils';

const result1 = add(2, 3);
const result2 = multiply(result1, 4);

console.log(`Result: ${result2}`); // Result: 20

package.json (添加构建脚本)

json
{
  "scripts": {
    "build": "webpack"
  }
}

运行构建：

bash
npm run build

加载器（Loaders）

Webpack 本身只能处理 JavaScript 和 JSON 文件，通过加载器可以处理其他类型的文件：

javascript
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

插件（Plugins）

插件可以执行各种任务，如打包优化、资源管理和注入环境变量：

javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

开发服务器

安装 webpack-dev-server 用于开发：

bash
npm install --save-dev webpack-dev-server

在 package.json 中添加启动脚本：

json
{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

模式

Webpack 提供了三种模式：

  • development: 启用 NamedChunksPlugin 和 NamedModulesPlugin
  • production: 启用各种优化，如代码压缩、作用域提升等
  • none: 不启用任何优化
javascript
module.exports = {
  mode: 'development'  // 或 'production' 或 'none'
};

小结

通过这个快速入门，你应该已经了解了 Webpack 的基本概念和用法。Webpack 是一个功能强大的工具，可以帮助你管理复杂的前端项目依赖关系。随着项目的增长，你可以逐步添加更多的配置选项、加载器和插件来满足项目需求。