Webpack 教程

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

以下是一些关于 Webpack 的基本概念和用法：

安装 Webpack

首先，你需要安装 Webpack。你可以使用 npm 或 yarn 来安装：

npm install --save-dev webpack webpack-cli

或者

yarn add --dev webpack webpack-cli

配置文件

Webpack 需要一个配置文件 webpack.config.js 来定义如何打包你的应用程序。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

入口和出口

• 入口 (entry)：指定了应用程序的入口文件。
• 出口 (output)：指定了输出文件的名称和路径。

模块加载

Webpack 使用加载器（loaders）来处理非 JavaScript 文件。例如，babel-loader 可以将 ES6+ 代码转换为 ES5。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
    },
  ],
},

插件

插件（plugins）可以用于执行各种任务，例如压缩代码、添加注释等。

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

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

开发服务器

Webpack 提供了一个开发服务器，可以实时编译你的应用程序。

npx webpack serve

图片处理

你可以使用 file-loader 或 url-loader 来处理图片。

module: {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource',
    },
  ],
},

更多关于 Webpack 的信息，请访问我们的 Webpack 教程 页面。

---

Webpack 是一个强大的工具，可以极大地提高你的开发效率。希望这份教程能帮助你入门 Webpack。如果你有任何问题，欢迎在 社区论坛 中提问。