返回

webpack 4.0.1：概念与零配置 Hello World

前端

Webpack 是什么？

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它将应用程序的源代码打包成可以在浏览器中运行的单个文件，并支持模块热更新、代码分割、tree shaking 等特性。

Webpack 的基本概念

模块

在 webpack 中，模块是应用程序的基本组成单元。模块可以是 JavaScript 文件、CSS 文件、图片文件或其他类型的文件。每个模块都有自己的作用域，并且可以通过 import 或 require 语句来引入其他模块。

入口文件

入口文件是 webpack 打包过程的起点。它是应用程序的主模块，其他模块都是从它开始引入的。在 webpack 配置文件中，需要指定入口文件。

输出文件

输出文件是 webpack 打包过程的终点。它是打包后的应用程序代码，可以被浏览器直接加载运行。在 webpack 配置文件中，需要指定输出文件。

加载器

加载器是 webpack 用来处理模块的工具。它可以将模块的源代码转换成 webpack 可以理解的格式。例如，babel-loader 可以将 ES6 代码转换成 ES5 代码，css-loader 可以将 CSS 代码转换成 JavaScript 代码。

插件

插件是 webpack 用来扩展其功能的工具。它可以完成各种各样的任务，例如压缩代码、生成源映射文件、tree shaking 等。

零配置 Hello World

现在，我们通过一个简单的 Hello World 实例来演示如何零配置使用 webpack。

安装 webpack

首先，我们需要安装 webpack。我们可以使用 npm 命令来安装：

npm install webpack webpack-cli --save-dev

创建项目目录

接下来，我们需要创建一个项目目录。我们可以使用 mkdir 命令来创建：

mkdir webpack-hello-world

创建入口文件

在项目目录中，我们需要创建一个入口文件。我们可以使用 touch 命令来创建：

touch src/index.js

在入口文件中写入代码

在入口文件中，我们需要写入以下代码：

console.log('Hello, World!');

创建 webpack 配置文件

在项目目录中，我们需要创建一个 webpack 配置文件。我们可以使用 touch 命令来创建：

touch webpack.config.js

在 webpack 配置文件中写入代码

在 webpack 配置文件中，我们需要写入以下代码：

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

运行 webpack

现在，我们可以使用 webpack 命令来运行 webpack：

webpack

查看输出文件

运行 webpack 后，会在项目目录中生成一个名为 dist 的目录。在这个目录中，我们可以找到输出文件 bundle.js。

在浏览器中运行输出文件

现在，我们可以将输出文件 bundle.js 复制到一个 HTML 文件中，并在浏览器中运行：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

当我们在浏览器中运行这个 HTML 文件时，就会看到 "Hello, World!" 输出到控制台。

总结

在本文中，我们介绍了 webpack 的基本概念并通过一个简单的 Hello World 实例演示了如何零配置使用 webpack。webpack 是一个非常强大的工具，它可以帮助我们轻松地构建复杂的 JavaScript 应用程序。