Node.js 如何使用webpack处理ejs视图

我正在尝试使用NodeJS配置webpack，我的网站也使用ejs作为视图。我已经尝试了很多方法来处理我的网页中的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

时，由于

中的数据，我得到了一些错误，好像他不知道这些数据来自哪里。例如，

。

---

有没有一种方法可以使用webpack将我的视图作为EJB处理？

如果您想将EJB用于nodejs项目，您不需要webpack。Webpack通常用于客户端渲染，如angular、vue、react等

选中此项：查看一些优化ejs或其他nodejs服务器渲染框架中使用的静态js文件的方法

ejs项目的基本结构是：

|____
|____server.js
|____views
| |____hello.ejs
|____package.json

hello.ejs一个简单明了的模板，您可以在其中使用任何类似于

<%- include('partials/head.ejs') %>

正如您所见，运行ejs应用程序不需要webpack

检查这些样本：

---

正如@JRichardsz所解释的，在NodeJS项目中使用EJS模板不需要显式的Webpack。
而且，它只是隐式地捆绑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)$)],
        }),
        ...
    })
  }

---

您需要将EJ打包。
尝试以下命令：

module.exports = (env, argv) => {
  return ({
    output: {
          path: './dist',
          publicPath: '/',
          filename: 'main.js'
        }
    })
  }

---

我知道几个月前有人问过这个问题。但对于那些像我一样遇到这个问题的人来说，这就是我如何让它起作用的。假设您正在使用Webpack4

如果您尚未安装

最重要的是帮助解决安装问题

将以下内容添加到您的网页包配置中

new HtmlWebpackPlugin({
  template: '!!raw-loader!./src/views/pages/<file-name-here>.ejs',
  filename: 'index.ejs',
  chunks: ['main', 'owl_carousel']
})

新的HtmlWebpackPlugin({
模板：'！！原始加载程序！/src/views/pages/.ejs'，
文件名：“index.ejs”，
块：['main'，'owl_carousel']
})

这就是魔力所在。包含模板路径时，请确保包含！！原始装载机！然后是相对路径

---

当html插件创建文件时，原始加载程序会忽略ejs使用的特殊语法。这基本上就像“嘿，插件，不管我放在这里什么，只要把我的文件给我就行了。”

复制网页插件工作得很好

  plugins: [
    new webpack.ProgressPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {from: "src/views", to: "views"}
      ]
    })

---

很好的问题。Ejs通常用作服务器渲染框架。您是否使用react、angular、vue等客户端渲染？@JRichardsz我只使用node js，没有任何其他前端客户端。我需要缩小CSS并删除重复的CSS。。。我可以使用node js的webpack，您可以在您提到的anwser中查看

。但是您的github存储库中不存在ejs。要使用ejs，您不需要webpack。也许是可能的，但不是必需的。Css缩小应该是另一个问题。