如何将React组件嵌入现有JSP页面？附Webpack配置求助

首先看你的Webpack配置，output.path存在语法问题：path.resolve(__dirname,)多了个冗余逗号，且没有指定项目的静态资源目录，这正是你无法确定输出文件位置的核心原因。咱们一步步来解决：

1. 修正Webpack输出路径配置 #

先明确你现有JSP项目的静态资源存放目录——Java Web项目里，静态资源通常放在src/main/webapp/static/js或webapp/js这类容器能识别的目录下（根据你的实际项目结构调整）。

修改后的Webpack配置如下：

var path= require('path');
module.exports = {
 entry : './script.jsx',
 output : {
 // 指定输出到项目的静态资源目录，示例为webapp下的js文件夹
 path : path.resolve(__dirname, 'src/main/webapp/js'), 
 filename: 'transpiled.js'
 },
 module : {
 rules: [
 {
 test: /\.jsx?$/,
 use: 'babel-loader', // 推荐用use替代旧写法loaders
 exclude : /node_modules/,
 options : { // 推荐用options替代旧写法query，符合Webpack4+规范
 presets : ['es2015','react']
 }
 }
 ]
 }
}

• 解释：path.resolve(__dirname, 'src/main/webapp/js')会把编译后的transpiled.js输出到项目的src/main/webapp/js目录，这个目录是Tomcat等容器默认识别的静态资源目录，JSP可以直接引用。
• 注意：如果你的项目静态资源目录是webapp/static/js，直接替换路径即可。

2. 在JSP页面中引入编译后的React文件 #

在需要嵌入React组件的JSP页面中，先引入React和ReactDOM（用CDN更适合现有项目快速集成，也可以打包到你的输出文件中），再引入编译后的transpiled.js：

<!-- 引入React和ReactDOM生产环境CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<!-- 引入编译后的文件，用JSP内置对象获取项目根路径避免路径错误 -->
<script src="${pageContext.request.contextPath}/js/transpiled.js"></script>

<!-- 准备React组件的挂载节点 -->
<div id="react-root"></div>

3. 确保React组件有挂载逻辑 #

在你的script.jsx中，必须包含将组件挂载到JSP DOM节点的逻辑，示例如下：

import React from 'react';
import ReactDOM from 'react-dom';

// 自定义React组件
function MyEmbeddedComponent() {
  return <div>这是嵌入JSP的React组件内容</div>;
}

// 将组件挂载到JSP页面的react-root节点
ReactDOM.render(<MyEmbeddedComponent />, document.getElementById('react-root'));

4. 验证输出路径 #

运行Webpack编译命令（比如webpack --mode production）后，去你指定的输出目录（如src/main/webapp/js）查看是否生成了transpiled.js。如果还是找不到，可以在Webpack配置里添加一行console.log(path.resolve(__dirname, 'src/main/webapp/js'))，运行编译命令时会打印输出路径的绝对地址，方便你确认位置是否正确。

内容的提问来源于stack exchange，提问作者Chetan