我正在尝试在 ejs 文件中加载 bundle.js 脚本？答案

【问题标题】：I am trying to load a bundle.js script in an ejs file?我正在尝试在 ejs 文件中加载 bundle.js 脚本？
【发布时间】：2019-08-08 10:09:30
【问题描述】：

我正在尝试从我的 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/home' 发出获取请求时，我希望 index.ejs 呈现：

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']
      }
    ],
  }
};

我的 react 文件 app.jsx 和 index.jsx 位于我的 src 文件夹中。我的 bundle.js 文件位于名为 build 的文件夹中。这两个文件夹都在根目录下。

【问题讨论】：

标签： javascript node.js reactjs ejs

【解决方案1】：

我建议你使用html-webpack-plugin 将bundle.js 注入到html。

https://github.com/jantimon/html-webpack-plugin

【讨论】：