Webpack4 打包 React 教程，前端必备工具-JavaScript中文网-JavaScript教程资源分享门户

什么是 Webpack？

Webpack 是一个现代化的前端打包工具。它可以将各种前端资源（如 JS、CSS、图片等）打包成一个或多个文件，并且支持代码分割、懒加载、模块热更新等功能。

Webpack 提供了一种完全可配置的方式来构建应用程序，同时还有着可插拔的插件系统，让你可以进行各种定制。

安装和基本配置

安装 Webpack 全局命令行工具：

npm install -g webpack

创建一个新的项目，并安装 Webpack：

mkdir myproject
cd myproject
npm init -y
npm install webpack webpack-cli --save-dev

创建一个简单的 HTML 文件，例如 index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Webpack4 打包 React 教程</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

创建一个简单的 React 组件，例如 App.js：

import React from 'react';

function App() {
  return <h1>Hello, World!</h1>;
}

export default App;

创建一个简单的入口文件，例如 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

我们要让 Webpack 将这个 React 组件打包成一个 JS 文件，并输出到 dist/bundle.js。

为了实现这个功能，我们需要创建一个新的配置文件 webpack.config.js，并在其中指定入口和出口：

const path = require('path');

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

现在我们可以在命令行中运行 Webpack：

npx webpack --mode development

Webpack 会查找 webpack.config.js 配置文件并读取其中的入口和出口。

加载器和插件

Webpack 提供了许多可插拔的插件和可配置的加载器。我们将使用其中的一些来优化我们的 React 应用。

Babel 和 ES6 转换

Webpack 可以使用 Babel 加载器来将 ES6 代码转换为 ES5 代码，这样我们可以在较旧的浏览器中运行它。首先安装 Babel 需要的模块：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

然后在 webpack.config.js 文件中配置 Babel 加载器：

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',
          options: {
            presets: [ '@babel/preset-env', '@babel/preset-react' ],
          },
        },
      },
    ],
  },
};

CSS 和样式

Webpack 可以使用 style-loader 和 css-loader 加载器来处理 CSS 和样式文件。首先安装这两个加载器：

npm install style-loader css-loader --save-dev

然后在 webpack.config.js 文件中配置 CSS 加载器：

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',
          options: {
            presets: [ '@babel/preset-env', '@babel/preset-react' ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ],
      },
    ],
  },
};

图片和字体

Webpack 可以使用 file-loader 和 url-loader 加载器来处理图片和字体文件。首先安装这两个加载器：

npm install file-loader url-loader --save-dev

然后在 webpack.config.js 文件中配置图片和字体加载器：

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',
          options: {
            presets: [ '@babel/preset-env', '@babel/preset-react' ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ],
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'assets/[name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

插件

Webpack 可以使用插件进行更高级的优化，例如压缩代码、生成 HTML、提取共享代码等。我们将使用 html-webpack-plugin 和 clean-webpack-plugin 插件。

首先安装这两个插件：

npm install html-webpack-plugin clean-webpack-plugin --save-dev

然后在 webpack.config.js 文件中配置插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

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',
          options: {
            presets: [ '@babel/preset-env', '@babel/preset-react' ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ],
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'assets/[name].[ext]',
            },
          },
        ],
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),
  ],
};

总结

在本教程中，我们学习了如何使用 Webpack 打包基本的 React 应用程序，并使用加载器和插件对其进行优化。

Webpack 是一个非常强大且高度可定制的工具，它可以帮助我们更好地组织和管理我们的前端代码，并实现更高效的性能和用户体验。

如果您想了解更多关于 Webpack 的内容，请查阅 Webpack 官方文档。

示例代码

您可以在我的 Github 仓库上找到此教程的示例代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b0a154add4f0e0ff9fb39a