node.js - 在 Express.js 项目中使用 Webpack 捆绑安装了 npm 的 Bootstrap

Question

我的项目的粗略结构：

project
|-- node_modules
|   |-- bootstrap
|   |-- jquery
|   |-- popper.js
|
|-- dist
|
|-- public
|   |-- js
|   |   |-- scripts.js
|   |
|   |-- css
|       |-- styles.css
|
|-- views
|   |-- index.ejs
|
|-- app.js

我需要在我bootstrap的. 如果涉及到 bootstrap，我可以使用它，但我想专门用于将我可能需要的所有内容捆绑到一个文件中，并确保它包含在我的文件中 - 自动（我知道 webpack 具有此功能）或只是确保存在于并在我的.publicindex.ejsCDNWebpackdistindex.ejsbundle.jsdist<link><script>index.ejs

我想确保所有东西都被捆绑在一起——我不想在我的index.ejs.

我将不胜感激，因为我找不到有关如何实现这一目标的指南或任何建议。我想这里的主要问题是 - 我应该如何构建webpack.config.js？

app.js是我的入口文件，它包含以下代码：

const bodyParser = require('body-parser');
const express = require('express');
const path = require('path');

const indexRoutes = require('./routes/index');

const app = express();
const port = process.env.PORT || 3000;

app.set('view engine', 'ejs');
app.set('views', path.resolve(__dirname, 'views'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static(path.resolve(__dirname, 'public')));

app.use('/', indexRoutes);

app.listen(port);

当前内容webpack.config.js：

const path = require('path');

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'app.js'),
  },
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

标签： node.jstwitter-bootstrapexpressnpmwebpack