Webpack + Express，根据视图提供特定的 js 文件

Question

您好，提前感谢您的帮助，

所以我对 node.js 和使用 express 还是很陌生。

在我当前的项目中，我使用的是 express + webpack。我的所有视图都有效，因为我无法在索引以外的其他视图中加载 javascript 文件。

我想做的是，每个视图都有一个 javascript 文件，索引会有 index.js、traduction traduction.js 等，但目前没有文件正在加载。

我尝试使用 HtmlWebpackPlugin 并为每个视图设置不同的块，但我尝试过的没有任何效果。

这是我的 webpack 配置：

'use strict';

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const keys = require('./keys_dev.js');

const __root = path.resolve(__dirname, '../');

module.exports = {
    entry: {
        index: [path.join(__dirname, '../src/scripts/index.js')],
        traduction: [path.join(__dirname, '../src/scripts/traduction.js')],     
    },
    output: {
        filename: 'scripts/[name].js',
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-syntax-dynamic-import']
                }
            },
            exclude: /node_modules/
        },
        {
            test: /\.(glsl|frag|vert)$/,
            use: ['glslify-import-loader', 'raw-loader', 'glslify-loader']
        },
        {
            test: /three\/examples\/js/,
            use: 'imports-loader?THREE=three'
        },
        {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'style-loader']
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: 'file-loader'
        },
        {
            test: /\.(jpe?g|png|gif)$/i,
            use: 'file-loader'
        }
        ]
    },
    resolve: {
        alias: {
            'three-examples': path.join(__root, './node_modules/three/examples/js'),
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new CleanWebpackPlugin(
            ['dist'],
            { root: __root },
            ),
        new CopyWebpackPlugin([
        {
            from: path.resolve(__root, 'static'),
        }
        ]),
        new HtmlWebpackPlugin(
            {
                filename: 'index.html',
                chunks: ['index'],
                template: './src/index.html',
            }
        ),
        new HtmlWebpackPlugin(
            {
                filename: 'traduction.html',
                chunks: ['traduction', 'index'],
                template: './src/traduction.html',
            }
        ),
        new webpack.ProvidePlugin({
            'THREE': 'three'
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new MiniCssExtractPlugin()
    ]
};

这是我的 server.js

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const keys = require('./config/keys_dev.js');
const bodyParser = require('body-parser');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./config/common.js');
const nodemailer = require('nodemailer');
const stripe = require('stripe')(keys.stripeSecretKey);

const isDeveloping = process.env.NODE_ENV !== 'production';
const port = 8080;
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(express.static('/src/scripts/'))
app.engine('html', require('ejs').renderFile);

if (isDeveloping) {
    const compiler = webpack(config);
    const middleware = webpackMiddleware(compiler, {
        contentBase: 'src'
    });

    app.use(middleware);
    app.use(webpackHotMiddleware(compiler));
    app.get('/', function response(req, res) {
        res.render(__dirname +"/src/index.html");
    });
    app.get('/cours', function response(req, res) {
        res.render(__dirname +"/src/cours.html");
    });
    app.get('/traduction', function response(req, res) {
        res.render(__dirname +"/src/traduction.html");
    });
    app.get('/boutique', function response(req, res) {
        res.render(__dirname +"/src/boutique.html");
    });
    app.get('/presentation', function response(req, res) {
        res.render(__dirname +"/src/presentation.html");
    });
    app.get('/ateliers', function response(req, res) {
        res.render(__dirname +"/src/ateliers.html");
    });
    app.post('/charge', (req, res) => {
        const amount = 300;
        stripe.customers.create({
            email: req.body.stripeEmail,
            source: req.body.stripeToken
        })
        .then(customer => stripe.charges.create({
            amount,
            description: req.body.cours,
            currency: 'eur',
            customer: customer.id
        }))
        .then(() => {
            var mailOpts, smtpTrans;

            smtpTrans = nodemailer.createTransport({
                service: 'gmail',
                auth: {
                    user: "******",
                    pass: "******"
                }
            });
            var mailoutput = "<html>\n\
            <body>\n\
            <tr>\n\
            <td>*****<br>\n\
            </td>\n\
            </tr>\n\
            </table></body></html>";

            mailOpts = {
                to: req.body.stripeEmail,
                attachments: [{
                    filename: req.body.cours + '.pdf',
                    path: path.join(__dirname, '/static/files/' + req.body.cours + '.pdf'),
                    contentType: 'application/pdf'
                }],
                subject: "******",
                html: mailoutput
            };

            smtpTrans.sendMail(mailOpts, function (error, res) {
                if (error) {
                    return console.log(error);
                }
            });
        })
        .then(charge => res.redirect('/'));
    });
}

对我做错了什么有什么建议吗？

Answer 1

尝试将 html 加载器添加到您的 webpack 配置 https://webpack.js.org/loaders/html-loader/