Webpack 基本使用教程

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

安装

首先，确保你的系统中已经安装了 Node.js 和 npm（Node.js 包管理器）。然后，在你的项目目录中运行以下命令来安装 Webpack：

npm install --save-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 指定了输出文件的名称和位置。

编译你的应用程序

在你的项目根目录中运行以下命令来编译你的应用程序：

npx webpack

这将在 dist 目录下创建一个名为 bundle.js 的文件。

使用本站链接

要了解更多关于 Webpack 的信息，请访问我们的 Webpack 教程。

图片示例

Webpack 的配置文件是 JavaScript 文件，因此它需要使用 JavaScript 的语法。以下是一个示例配置文件：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

在这个配置文件中，我们添加了一个模块规则（module rule），用于处理 JavaScript 文件。我们使用 babel-loader 来将 ES6+ 代码转换为 ES5，以便在旧版浏览器中运行。

<center><img src="https://cloud-image.ullrai.com/q/webpack_config_js/" alt="webpack_config_js"/></center>