javascript - 我正在尝试在 ejs 文件中加载 bundle.js 脚本?
问题描述
我正在尝试从我的 index.ejs 文件运行一个反应应用程序。捆绑包构建。但是,当我路由到这个文件时,我在 bundle.js 脚本上收到 404,index.ejs 文件在那里并且可以呈现内容,而不是 react 应用程序。谁能看到我错过了什么?这是我的 index.ejs 文件的样子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bookie Lou</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
这是我的路由文件的样子,我在其中确定我希望 index.ejs 在发出 get 请求时呈现'/index/home'
:
const express = require('express');
const router = express.Router();
const { ensureAuthenticated } = require('../config/auth');
router.get('/', (req, res) => res.render('welcome'))
router.get('/dashboard', ensureAuthenticated, (req, res) =>
res.render('dashboard', {
user: req.user
})
);
router.get('/index/home', (req, res) => res.render('index'));
module.exports = router;
我的 webpack 看起来像这样:
module.exports = {
context:
path.join(__dirname, './src/'),
entry: './index.jsx',
devtool: 'source-map',
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/build'),
},
resolve: {
extensions: ['.js', '.jsx','.json', '.css']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel-loader'],
},
{
test: /\.index$/,
use: 'file?name=[name].[ext]'
},
{
test: /\.html$/,
loader: 'file?name=[name].[ext]',
},
{
test: /\.(gif|jpe?g|png|ico)$/,
use: 'url-loader?limit=1000'
},
{
test: /\.(css|less)$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
],
}
};
我的反应文件 app.jsx 和 index.jsx 位于我的 src 文件夹中。我的 bundle.js 文件位于名为 build 的文件夹中。这两个文件夹都在根目录下。
解决方案
我建议您使用html-webpack-plugin
注入bundle.js
到 html。
推荐阅读
- python - 沿 3d 线插入点
- mongodb - 如何使用排序规则使用正则表达式过滤带有重音的单词
- node.js - 在服务器上注销时浏览器未清除 cookie,但会清除 localhost 的 cookie
- excel - 如何将参数传递给 Laravel Excel 的导出文件以进行 DB 查询
- c# - 创建多个 PDF 的问题
- c++ - 如何将 cMessage 类型转换为消息定义类型
- html - 如何根据从另一个相同文本区域的删除突出显示只读文本区域?
- python - 无法在基本 conda env 之外启动 jupyter 服务器
- c++ - 通过 Windows 终端访问 C++ ASCII 代码
- javascript - Selenium/BS4 JS 执行引发“消息:TypeError:arguments[0].setAttribute 不是函数”