Использование Webpack в проекте Express. js для объединения Bootstrap с установленным npm - PullRequest
Новая
       6

Использование Webpack в проекте Express. js для объединения Bootstrap с установленным npm

0 голосов
/ 23 февраля 2020

Грубая структура моего проекта: 

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

Мне нужно включить bootstrap и мое собственное содержимое папки public в мой index.ejs. Если речь идет о bootstrap, я мог бы сделать это, используя CDN, но я хочу специально использовать Webpack, чтобы объединить все, что мне может понадобиться, в один файл в dist и убедиться, что он включен в мой index.ejs file - либо автоматически (я знаю, что в webpack есть эта функция), либо просто убедитесь, что bundle.js существует в dist и обратитесь к нему в тегах <link> или <script> в моих index.ejs.

I хочу убедиться, что все в комплекте - я не хочу, чтобы в моем 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'),
  },
};
...