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 | const path = require('path') |
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 | const path = require('path') |
添加了一个 module,制定了一条 rule。
test
表示可通过此规则测试的文件类型;include
指向要进行测试的文件的所在目录;exclude
表示不需要测试的路径;use
表示将对通过测试的文件所应用的动作;loader
即预处理器,这里的babel-loader
会把 jsx 转换成标准 js;@babel/preset-env
预设检查常用浏览器的兼容性和 polyfill;@babel/preset-react
预设实际执行 jsx 转换。
这时候的 webpack 配置,就可以正确打包使用 jsx 编写的 React 组件了。
后记
- webpack 配置文件可以有多个。一个非 SPA 的网站可以一个页面对应一个 webpack 配置文件;
- webpack 还可以打包 css:https://hashinteractive.com/blog/complete-guide-to-webpack-configuration-for-react/#minicssextractplugin
参考
- webpack documentation:https://webpack.js.org/concepts/
- COMPLETE GUIDE TO WEBPACK CONFIGURATION FOR REACT:https://hashinteractive.com/blog/complete-guide-to-webpack-configuration-for-react/