如何使用 webpack 处理 ejs 视图答案

【问题标题】：How to handle ejs views using webpack如何使用 webpack 处理 ejs 视图
【发布时间】：2020-10-11 18:11:22
【问题描述】：

我正在尝试使用节点 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 处理？

【问题讨论】：

非常好的问题。 Ejs 是常用的服务端渲染框架。你是在使用 react、angular、vue 等客户端渲染吗？
@JRichardsz 我只使用 node js，没有任何其他前端客户端。

标签： node.js webpack ejs

【解决方案1】：

正如@JRichardsz 解释的那样，您不需要 Webpack 明确地在 NodeJS 项目中使用 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)$)],
        }),
        ...
    })
  }

【讨论】：

【解决方案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 使用的特殊语法。它基本上就像“嘿插件忽略我放在这里的任何东西，只给我我的文件”。

【讨论】：

【解决方案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 应用程序。

检查这些示例：

【讨论】：

我需要缩小我的 CSS 并删除重复的 CSS...我可以将 webpack 用于 node js 你可以查看github.com/bengrunfeld/expack
在您的回答中您提到了<%- include('partials/head.ejs') %>。但是 ejs 不存在于您的 github 存储库中。要使用 ejs，你不需要 webpack。也许是可能的，但不是必需的。 CSS缩小应该是另一个问题。

【解决方案4】：

您需要打包 EJS。
请尝试以下命令：

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

【讨论】：

【解决方案5】：

copy-webpack-plugin 完美运行

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

【讨论】：