揭秘webpack 4 的魔幻：从0到1轻松上手构建现代化 JavaScript 应用程序

2023-09-20 06:52:39

webpack 4 初识：何谓静态模块打包器？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。这意味着它能够将多个 JavaScript 模块组合成一个或多个可执行文件，方便浏览器或其他环境直接加载运行。

在前端开发中，我们通常会将应用程序拆分成许多独立的模块，每个模块负责特定的功能。这种模块化开发方式可以提高代码的可维护性和重用性。然而，当我们需要在浏览器中运行这些模块时，就必须将它们组合成一个可加载的文件，这就是 webpack 的用武之地。

webpack 4 核心概念

在使用 webpack 之前，我们需要了解一些基本概念：

模块 (Module) ：模块是应用程序中的独立功能单元，可以被单独开发、测试和部署。
依赖 (Dependency) ：模块之间可能存在依赖关系，例如模块 A 需要使用模块 B 中的某个函数。
入口点 (Entry Point) ：这是应用程序的起点，webpack 从这里开始构建依赖关系图。
输出 (Output) ：webpack 将构建结果输出到指定的文件或目录中。

webpack 4 基本配置

webpack 的配置通常保存在一个名为 webpack.config.js 的文件中。在这个文件中，你可以指定入口点、输出位置、加载器（loader）和插件（plugin）。

以下是 webpack 4 的一个基本配置示例：

const path = require('path');

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