close

Webpack 初学者指南

Webpack 是现代 Web 开发中非常有用的工具，有助于资源管理和项目优化。 以下是新手如何使用的基本指南 Webpack：

安装 Webpack

首先，如果尚未安装 Node.js，请安装。 然后，为您的项目创建一个目录并在该目录中打开终端/命令提示符窗口。 运行以下命令来安装 Webpack webpack-cli （Webpack 的命令行界面）： 

npm install webpack webpack-cli --save-dev

创建 Webpack 配置

webpack.config.js 在项目目录的根目录中 创建一个名为的文件。 您将在此处进行配置 Webpack。 

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

创建文件夹和文件

在根目录中创建一个 src 文件夹，并在其中创建一个名为的文件 index.js 作为应用程序的主文件。

跑步 Webpack

打开 Terminal 并运行以下命令来编译源代码 Webpack： 

npx webpack

运行此命令后， Webpack 将按照配置编译文件，并 在目录中 index.js 创建名为的输出文件 。 bundle.js dist

在 HTML 中使用

在目录或您的首选位置创建一个 HTML 文件 dist 并链接到该 bundle.js 文件： 

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

运行应用程序

在浏览器中打开 HTML 文件并检查您的应用程序是否正常工作。

这只是一个基本指南。 Webpack 具有许多强大的功能，例如处理 CSS、管理模块、使用加载器和插件、源代码优化等等。 探索官方 Webpack 文档以充分利用该工具的功能。