Webpack 打包 React 组件

之前 通过直接运行 babel 相关命令，把 jsx 语法做了预处理。但输出远远达不到 create-react-app 的水平。 Google 了一圈发现，原来可以通过 webpack 把 jsx 预处理、js 压缩、js 打包几个步骤一次性执行。

初始化 Webpack Config

安装 webpack：

npm i webpack webpack-cli

在项目根目录（package.json 所在目录）下新建 webpack.config.js 文件，这个是 webpack 配置文件，写入以下内容：

const path = require('path')

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

entry 是一个入口点。标识 webpack 开始创建其内部依赖图所用的 js 文件。webpack 可以计算出入口文件所依赖的其它模块和库。

output 告诉 webpack 打包后的文件名字和存放路径。

这时候的 webpack 配置就可以处理非 jsx 编写的 React 文件了。 执行 webpack：

npx webpack --config webpack.config.js

在 dist 目录下就会看到 index.min.js 文件了。文件内容跟 create-react-app 输出类似。

添加 babel 相关配置以预处理 jsx

webpack 只能理解标准的 js 和 json 文件，像 jsx 这种写法就必须先通过执行一个特定的 loader，将 jsx 转换成标准 js 语法才行。

安装 babel：

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader

更新 webpack.config.js 文件：

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.min.js'
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults" 
              }],
              '@babel/preset-react'
            ]
          }
        }]
      }
    ]
  }
}

添加了一个 module，制定了一条 rule。

• test 表示可通过此规则测试的文件类型；
• include 指向要进行测试的文件的所在目录；
• exclude 表示不需要测试的路径；
• use 表示将对通过测试的文件所应用的动作；
• loader 即预处理器，这里的 babel-loader 会把 jsx 转换成标准 js；
• @babel/preset-env 预设检查常用浏览器的兼容性和 polyfill；
• @babel/preset-react 预设实际执行 jsx 转换。

这时候的 webpack 配置，就可以正确打包使用 jsx 编写的 React 组件了。

后记

1. webpack 配置文件可以有多个。一个非 SPA 的网站可以一个页面对应一个 webpack 配置文件；
2. webpack 还可以打包 css：https://hashinteractive.com/blog/complete-guide-to-webpack-configuration-for-react/#minicssextractplugin

参考

1. webpack documentation：https://webpack.js.org/concepts/
2. COMPLETE GUIDE TO WEBPACK CONFIGURATION FOR REACT：https://hashinteractive.com/blog/complete-guide-to-webpack-configuration-for-react/