node.js - 如何使用 webpack 处理 ejs View

Question

我正在尝试使用 node js 在我的网站上配置 webpack，我也在使用 ejs 作为 View 。我尝试了很多方法来处理我的 webpack 中的 ejs，但直到现在我都没有成功。

const path = require('path')
const nodeExternals = require('webpack-node-externals')

module.exports = (env, argv) => {
  return ({
    entry: {
      server: './src/app.js',
    },
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: '/',
      filename: 'main.js'
    },
    mode: argv.mode,
    target: 'node',
    node: {
      // Need this when working with express, otherwise the build fails
      __dirname: true,
      __filename: true,
    },
    externals: [nodeExternals()], // Need this to avoid error when working with Express
    module: {
      rules: [
        {
          // Transpiles ES6-8 into ES5
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
         test: /\.ejs$/,
         loader: 'ejs-loader',
         options: {
           esModule: false
         }
       }
      ]
    }
  })
}

当我使用 HtmlWebPackPlugin由于 <%- %> 中的数据，我得到了一些错误就好像他不知道这些数据是从哪里来的。例如， <%- include('partials/head.ejs') %> .
有没有办法使用 webpack 将我的 View 处理为 ejs？

Answer 1

正如@JRichardsz 所解释的那样，在 NodeJS 项目中，您不需要显式地使用 Webpack 来使用 EJS 模板。
此外，它只是隐式地捆绑了 EJS 模板(代码)。
尝试使用以下命令将文件与最新的 Webpack.js 捆绑在一起进行安装:

npm install --save-dev webpack

另外，请尝试使用此代码进行一些修复:

module.exports = (env, argv) => {
  return ({
    output: {
          path: path.resolve(__dirname, 'dist'),
          publicPath: '/',
          filename: 'main.js'
        }
        ...
        // in case, all of this doesn't work. Then, explicitly whitelist EJS using regex
        ...
        nodeExternals({
            whitelist: [/\.(?|ejs)$)],
        }),
        ...
    })
  }