javascript - 将 webpack 与 express 和 ejs 一起用于前端和/或服务器

Question

我正在努力寻找在 nodejs 项目的前端和服务器部分使用 webpack 的解决方案。

我正在构建一个具有不同 API 端点的快速解决方案和一个使用 EJS 进行模板的前端，该模板将使用这些端点进行数据处理。

基本上我想要实现的是使用 webpack 在前端编译我的 SCSS 和 JS，以及一个将编译 EJS 并将 CSS 和 JS 包注入前端的解决方案。

我当前的 server.js

const express = require('express')
const formidable = require('express-formidable');
const session = require('express-session')
const bodyparser = require('body-parser')
const app = express()
const path = require('path');

const auth = require('./app/middleware/authorization/auth')
const upload = require('./app/middleware/filehandling/upload')

app.set('port', process.env.PORT || 8080);
app.set('view engine', 'ejs')
app.set('views', path.join('views'));

app.use(session({
    secret: hash.getRandomString(16),
    resave: true,
    saveUninitialized: true
}))

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

app.use(passport.initialize());
app.use(passport.session());
app.use(bodyparser.urlencoded({ extended: true }))
app.use(bodyparser.json())

//DIFFERENT ROUTES DOWN HERE

app.listen(3000, () => {
    console.log('listening on port 3000')
}) 

我的文件夹结构是

public
 - upload/

 src
  - scss/
  - index.js

views
 - partials/
 - index.ejs
 - login.ejs

我有一个当前的 webpack.config.dev.js 用于静态 HTML/CSS/JS 项目，该项目正在构建和编译 SCSS 和 JS 到包中。

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/app');
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: path.join('src', 'index.html'),
            inject: true
        }),
        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: /\.(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;

还有一个 webpack.config.build.js

const path = require('path');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpackConfig = require('./webpack.config');
const packageJson = require('./package.json');

module.exports = merge(webpackConfig, {

  devtool: 'source-map',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: packageJson.name + '.[chunkhash].js'
  },
  plugins: [
    new CleanWebpackPlugin(['dist'])
  ] 
});

我称之为使用

"dev": "cross-env NODE_ENV=dev webpack-dev-server --progress --mode development --config webpack.config.dev.js",
"build": "webpack -p --progress --mode production --config webpack.config.build.js"

我有点不确定如何实现这一目标。

标签： javascriptnode.jsexpresswebpacksass