如何使用 webpack 处理 ejs 视图

Question

我正在尝试使用 Node js 在我的网站上配置 webpack，我还使用 ejs 作为视图。我尝试了很多方法来处理我的 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 将我的视图作为 ejs 处理？

Answer 1

我知道几个月前就有人问过这个问题。但对于那些像我一样遇到这个问题的人来说，这就是我解决这个问题的方法。假设您使用 webpack 4。

如果您尚未安装html-webpack-plugin

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

将以下内容添加到您的 webpack 配置中

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

这就是神奇之处。当包含模板路径时，请确保包含!!raw-loader！接下来是相对路径。

raw-loader 使得当 html 插件创建文件时它会忽略 ejs 使用的特殊语法。它基本上就像“嘿插件忽略我放在这里的任何内容，只给我我的文件”。

Answer 2

如果你想在nodejs项目中使用ejs，则不需要webpack。Webpack 通常用于客户端渲染，如 Angular、Vue、React 等

检查一下：我应该使用哪个命令来缩小和优化 Nodejs Express 应用程序？查看一些优化 ejs 或其他 Nodejs 服务器渲染框架中使用的静态 js 文件的方法。

ejs项目的基本结构是：

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

hello.ejs一个简单明了的模板，您可以在其中使用任何 ejs 代码，例如您的

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

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

检查这些样本：

• 最小的 ejs 示例
• 部分样本