webpack 快速入门指南

2023-12-19 11:14:04

摘要： 本文将通过一个简洁的 demo 来引导你快速上手 webpack，它是一款深受 JavaScript 开发者青睐的静态模块打包工具。

关键词： webpack, JavaScript, 模块化, Webpack 构建, 前端开发, 模块打包器, 静态模块打包器, 代码分割, 依赖管理

介绍

Webpack 作为一款静态模块打包工具，在 JavaScript 应用开发中扮演着至关重要的角色。它负责将各种模块（如 JavaScript、CSS、图像等）打包成可供浏览器或其他环境使用的单个文件。通过使用 webpack，开发者可以轻松管理应用程序依赖关系，实现代码拆分和优化，从而提升应用程序性能。

实战：一个 webpack 小 demo

为了快速上手 webpack，我们通过一个小 demo 来展示它的基本工作原理：

项目结构：

├── package.json
├── index.js
├── src
│   ├── main.js
│   └── style.css

package.json：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "A simple webpack demo",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

index.js：

import { add } from './src/main';

console.log(add(1, 2)); // 3

src/main.js：

export function add(a, b) {
  return a + b;
}

src/style.css：

body {
  background-color: #000;
  color: #fff;
}

webpack 配置：

新建一个 webpack.config.js 文件，配置webpack 打包规则：

const path = require('path');

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