React 是一款由 Facebook 开发的前端 JavaScript 框架，它极大地简化了构建复杂应用程序的过程。然而，React 应用程序通常需要进行打包以便于部署，而 WebPack 是一款非常流行的打包工具。本文将讨论如何使用 WebPack 打包 React 的项目。
如何安装 WebPack
首先，我们需要安装 WebPack。我们可以通过 npm 或 yarn 进行安装：
npm install webpack --save-dev
yarn add webpack --dev
同时，我们还需要安装 webpack-dev-server 以方便本地开发：
npm install webpack-dev-server --save-dev
yarn add webpack-dev-server --dev
如何创建 React 应用程序
接下来，我们需要创建一个 React 应用程序。针对 React 官方文档中提供的自定义 Node.js 环境 (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)。
npx create-react-app my-app
cd my-app
如何配置 WebPack
接下来，我们需要配置 WebPack。我们可以在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：
// javascriptcn.com 代码示例
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'
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'public'),
compress: true,
port: 3000
}
};这是一个非常简单的 WebPack 配置，它指定了应用程序的入口点和输出路径，并通过 babel-loader 将 ES6+ 代码转换成 ES5 代码。
我们还配置了一个启动本地开发服务器的选项，它将 WebPack 打包后的内容提供给浏览器。因为使用了 create-react-app 已经创建好一个 Webpack 配置文件。下面我们来加入一个图片 loader 的配置：
...
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
...还需要在 index.js 中导入图片：
import img from './assets/image.png';
...
<img src={img} alt='test' />
... Webpack 仅能识别 JavaScript 语言，如果想加入图片或其他非 JavaScript 的文件，必须使用相应的 loader 将它们转换为 JS 代码，这里使用 file-loader 来转换图片文件。
如何使用 WebPack 打包应用程序
完成 WebPack 的配置后，现在可以用以下代码来打包 React 应用程序：
npx webpack
这样，就可以在 dist 文件夹下看到 WebPack 打包生成的文件。
如何启动本地开发服务器
如果你想在本地测试应用程序，你可以启动一个本地开发服务器。只需在命令行中输入以下命令：
npm run start
或
yarn start
之后，在浏览器中访问 http://localhost:3000/，就可以看到 React 应用程序了。
总结
本文简单介绍了如何使用 WebPack 打包 React 应用程序，同时还演示了如何加入图片 loader 的修改。当然，还有很多其他的 WebPack 配置需要掌握，但这是一个很好的入门指南，帮助初学者了解如何基于 WebPack 构建应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6544530c7d4982a6ebe33c42