Использование шаблонов EJS с MySQL и webpack для экспресс-решения - PullRequest
Новая
       16

Использование шаблонов EJS с MySQL и webpack для экспресс-решения

0 голосов
/ 26 июня 2019

Я немного озадачен отношением между express, шаблонами ejs, MySQL и webpack - и index.js и файлами SCSS.

Я пытаюсь создать экспресс-решение с различными конечными точками API для C (R) UD и некоторыми конечными точками для просмотра данных на серверной части. Для просмотра я использую EJS - для внешнего интерфейса - и для хранения данных я использую MySQL.

Запуск nodemon server.js это прекрасно работает - вроде.

Когда я пытаюсь ввести в проект Webpack для компиляции index.js и SCSS, я начинаю немного запутываться.

У меня есть этот конфиг веб-пакета (взят из стандартного проекта HTML и настроен для этого проекта) 

const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
// const ExtractText = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

const dirNodeModules = 'node_modules';
const dirAPP = path.join(__dirname, 'src');
const dirAssets = path.join(__dirname, 'src/assets');

const packageJson = require('./package.json')

var config = {

    entry: {
        bundle: path.join(dirAPP, 'index')
    },
    resolve: {
        modules: [
            dirNodeModules,
            dirAPP,
            dirAssets
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            devMode: devMode
        }),
        new HTMLWebpackPlugin({
            template: '!!ejs-webpack-loader!views/index.ejs',
            inject: true,
            header: {title: 'test'}
        }),
        new MiniCssExtractPlugin({
            filename: packageJson.name + '.[chunkhash].min.css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        },
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.ejs$/,
                loader: 'ejs-compiled-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file?=name/fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name]-[hash:8].[ext]',
                        pluginPath: dirAssets + '/images/',
                        outputPath: dirAssets + '/images/'
                    }
                }]
            }]
    }
}

module.exports = config;

При компиляции JS / SCSS и index.ejs включается заголовок / нижний колонтитул (<%- include partial/header.ejs %>), когда я запускаю npm run build

"build": "webpack -p --progress --mode production --config webpack.config.build.js"

index.ejs 

<%- include partial/header.ejs %>

<div class="container">

    HTML HERE

</div>

<%- include partial/footer.ejs %>

Компилирует файлы в папку dist с index.html

index.html 

<!DOCTYPE html>
<html lang="en">
<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>test</title>

<link href="/project.e3a13593430b8979ff3d.min.css" rel="stylesheet"></head>
<body>
    <div id="site">

        <div class="container">

            HTML HERE

        </div>

    </div>
<script type="text/javascript" src="/project.e3a13593430b8979ff3d.js"></script></body>
</html>

Как бы я получил f.x. Мои login.ejs или about.ejs шаблоны скомпилированы

и на ф.х. bookings.ejs Я хочу отобразить список заказов с помощью 

res.render('bookings', bookings)

взято с этим 

router.get('/:hid', (req, res) => {

    database('sh_bookings').select('*').where('b_house_id', req.params.hid).then((bookings) => {

        if (bookings.length === 0){
            res.render('bookings', 0)
        } else {
            res.render('bookings', bookings)
        }

    }).catch((error) => {
        res.status(500).json({ status: 'error', message: error })
    })
})

Это то, где я действительно запутался, если Webpack скомпилирует файл bookings.html с npm run build и express обслуживает этот файл из папки dist, как будут отображаться заказы из MySQL на / bookings / route?

Надеюсь, что кто-то может уточнить для меня, где я полностью неправильно понимаю отношения: -)

...