前言
在前端开发中，我们经常需要使用各种不同的包管理器和构建工具来完成项目。其中，npm 是一个非常流行的包管理器，而 @umijs/bundler-webpack 是一个针对 webpack 的优化的打包工具。在本文中，我们将介绍如何使用 @umijs/bundler-webpack 完成项目打包的过程。
安装和使用
首先，我们需要通过 npm 安装 @umijs/bundler-webpack：
npm install @umijs/bundler-webpack --save
接下来，在项目中创建一个 webpack.config.js 配置文件，并填入以下内容：
-- -------------------- ---- -------
----- - ----- - - ----------------------------------
-------
------ -----------------
----------- ----------
------- -----
----- -----
---------- -----
---------- -
------ --------
------------ -----------
-
---在这个配置文件中，我们指定了入口文件 ./src/index.js，输出目录 ./dist/，使用了 modern 模式和 hash 资源文件名称，同时生成了 sourcemap 文件。另外，我们还对 React 和 ReactDOM 进行了 externals 处理，这样在打包时会将它们从 vendor 中删除，单独输出。
完成配置文件后，我们只需要执行以下命令即可完成打包：
webpack --config webpack.config.js
示例代码
以下是一个简单的示例代码，我们在 ./src/index.js 文件中引入了 React 和 ReactDOM，并输出了一个简单的 hello world。
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>Hello, World!</div>
);
ReactDOM.render(<App />, document.getElementById('root'));结语
通过本文，我们了解了如何使用 @umijs/bundler-webpack 进行打包操作。在实际项目开发中，我们可以根据具体需求来使用不同的配置选项，帮助我们更好地完成项目。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3dd0eedbf7be33b2567120