如何使用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

正如@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)$)],
        }),
        ...
    })
  }

Answer 2

我知道几个月前就有人问过这个问题。但对于像我这样遇到这个问题的人来说，这就是我如何让它工作的。假设你使用的是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 3

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

查看这里：Which command should I use to minify and optimize nodejs express application?可以查看一些方法来优化在ejs或其他nodejs服务器渲染框架中使用的静态js文件。

ejs项目的基本结构为：

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

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

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

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

检查以下示例：

• minimal ejs sample
• partials sample