Webpack 打包 React 组件

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

初始化 Webpack Config

安装 webpack:

1
npm i webpack webpack-cli

在项目根目录(package.json 所在目录)下新建 webpack.config.js 文件,这个是 webpack 配置文件,写入以下内容:

1
2
3
4
5
6
7
8
9
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:

1
npx webpack --config webpack.config.js

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

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

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

安装 babel:

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

更新 webpack.config.js 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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/

评论