使用 ejs 模块运行构建 webpack 时找不到模块答案

【问题标题】：Module not found when run build webpack with ejs module使用 ejs 模块运行构建 webpack 时找不到模块
【发布时间】：2021-05-26 20:58:54
【问题描述】：

我有一个简单的项目，我使用 ejs 模块和 webpack 没有大量配置。
当我使用节点运行 index.js 时，一切都很好。
当我尝试运行构建时，我收到以下错误消息：

错误信息：

        PS C:\Users\Florian\Desktop\template_ejs_webpack> npm run build-prod
    
    > template_mit_ejs@1.0.0 build-prod C:\Users\Florian\Desktop\template_ejs_webpack
    > webpack --mode production
    
    assets by status 10.1 KiB [cached] 1 asset
    modules by path ./node_modules/ejs/lib/*.js 30.1 KiB
      ./node_modules/ejs/lib/ejs.js 26.1 KiB [built] [code generated]
      ./node_modules/ejs/lib/utils.js 4.07 KiB [built] [code generated]
    ./src/index.js 301 bytes [built] [code generated]
    ./node_modules/ejs/package.json 1.47 KiB [built] [code generated]
    
    ERROR in ./node_modules/ejs/lib/ejs.js 47:9-22
    Module not found: Error: Can't resolve 'fs' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
    resolve 'fs' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
      Parsed request is a module
      using description file: C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\package.json (relative path: ./lib)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\node_modules doesn't exist or is not a directory
          looking for modules in C:\Users\Florian\Desktop\template_ejs_webpack\node_modules
            single file module
              using description file: C:\Users\Florian\Desktop\template_ejs_webpack\package.json (relative path: ./node_modules/fs)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs.wasm doesn't exist
            C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs doesn't exist
          C:\Users\Florian\Desktop\node_modules doesn't exist or is not a directory
          C:\Users\Florian\node_modules doesn't exist or is not a directory
          C:\Users\node_modules doesn't exist or is not a directory
          C:\node_modules doesn't exist or is not a directory
     @ ./src/index.js 4:12-26
    
    ERROR in ./node_modules/ejs/lib/ejs.js 48:11-26
    Module not found: Error: Can't resolve 'path' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
            - install 'path-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "path": false }
    resolve 'path' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
      Parsed request is a module
      using description file: C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\package.json (relative path: ./lib)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\node_modules doesn't exist or is not a directory
          looking for modules in C:\Users\Florian\Desktop\template_ejs_webpack\node_modules
            single file module
              using description file: C:\Users\Florian\Desktop\template_ejs_webpack\package.json (relative path: ./node_modules/path)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path.wasm doesn't exist
            C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path doesn't exist
          C:\Users\Florian\Desktop\node_modules doesn't exist or is not a directory
          C:\Users\Florian\node_modules doesn't exist or is not a directory
          C:\Users\node_modules doesn't exist or is not a directory
          C:\node_modules doesn't exist or is not a directory
     @ ./src/index.js 4:12-26
    
    webpack 5.24.1 compiled with 2 errors in 906 ms
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! template_mit_ejs@1.0.0 build-prod: `webpack --mode production`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the template_mit_ejs@1.0.0 build-prod script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\Florian\AppData\Roaming\npm-cache\_logs\2021-02-24T13_35_40_240Z-debug.log

文件夹结构：


    template_ejs_webpack
    |--dist
    |  |--index.html
    |--node_modules
    |--src
    |  |--index.js
    |--package-lock.json
    |--package.json
    |--template.ejs
    |--webpack.config.js

index.js：


    "use strict"
    
    
    const ejs = require("ejs")
    
    const planet = "Mars"
    
    ejs
        .renderFile("./template.ejs", { planetVar: planet })
        .then((templateHTML) => {
            console.log(templateHTML)
        })

index.html：


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="output"></div>
    
        <script src="./main.js"></script>
    </body>
    </html>

template.ejs：


    <p>Mission accomplished. Landed on <%= planetVar %></p>

package.json：


    {
        "name": "template_mit_ejs",
        "version": "1.0.0",
        "description": "",
        "main": "script.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "webpack",
            "build-prod": "webpack --mode production",
            "watch": "webpack --watch"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {},
        "devDependencies": {
            "ejs": "^3.1.6",
            "ejs-loader": "^0.5.0",
            "webpack": "^5.24.1",
            "webpack-cli": "^4.5.0"
        }
    }

webpack.config.js：


    module.exports = {
        mode: 'development',
        target: 'web',
        module: {
            rules: [
                {
                    test: /\.ejs$/,
                    use: {
                        loader: 'ejs-loader'
                    }
                }
            ]
        }
      };

有人建议我的代码有什么问题吗？

【问题讨论】：

标签： javascript node.js webpack ejs

【解决方案1】：

如果您仔细查看错误日志，您会看到：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

这表示您需要填充一些节点核心模块，在您的情况下，您需要同时填充fs 和path。为此，请将以下内容添加到您的 webpack.config.js:

module.exports = {
   ...
   resolve: {
    extensions: [".js"],
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify")
    }
  },
};

并安装path-browserify。 npm install path-browserify.

【讨论】：

为什么"fs": false？

【解决方案2】：

首先，您的配置似乎缺少入口点。有很多缺失的信息，我强烈建议您查看 webpacks Documentation 以获取模块解析。

您可能还想排除 node_modules。

module: {
   ...
   rules{
     ...
     exclude: ["/node_modules/"]
   }
}

【讨论】：

感谢您的帮助，但我认为它与入口点无关，因为它将使用默认入口点（./src/index.js）。但尽管如此，我还是在 webpack.config 文件中添加了入口点和排除定义。还是一样。当我删除 index.js 文件中除以下行之外的所有代码时，我收到相同的错误消息：``` const ejs = require("ejs")```
是的，就像我提到的那样，这是您可能想要做的。我也使用 webpack，但我的 typescript 项目只对我有用。大多数帮助只是像我之前建议的那样阅读 webpack 文档。

【解决方案3】：

我有同样的问题，你只需要安装 raw-loader 来集成 .ejs 文件和 HtmlWebPackPluging 来将你的 .ejs 复制到 dist 文件夹中，以便使用它们。只需将以下属性（plugins）添加到您的 webpack.config.js 中，并包含以下信息：

在您的配置中，它将如下所示：

module.exports = {
    mode: 'development',
    target: 'web',
    module: {
        rules: [
            {
                test: /\.ejs$/,
                use: {
                    loader: 'ejs-loader'
                }
            }
        ]
    },
    plugins: [
       new HtmlWebPackPlugin({
          template: '!!raw-loader!./path-to-ejs-file/index.ejs',
          filename: "./index.ejs"
    })
}

正如我所说，使用 HtmlWebpackPluging 将您的 HTML（在本例中为 ejs）复制到您的 dist/public 文件夹，并且 raw-loader 允许您使用 ejs 与此插件。

【讨论】：