Webpack + Express + EJS:错误:无法find模块“。”

我正在写webpack,打字稿和ejs的快递networking应用程序。 当击中应该为.ejs文件服务的路线之一时,出现以下错误:

Error: Cannot find module "." at webpackMissingModule (/Users/max/Development/test/express-webpack/dist/server.js:20669:74) at new View (/Users/max/Development/test/express-webpack/dist/server.js:20669:152) at EventEmitter.render (/Users/max/Development/test/express-webpack/dist/server.js:18776:12) at ServerResponse.render (/Users/max/Development/test/express-webpack/dist/server.js:20479:7) at /Users/max/Development/test/express-webpack/dist/server.js:25508:7 at Layer.handle [as handle_request] (/Users/max/Development/test/express-webpack/dist/server.js:4524:5) at next (/Users/max/Development/test/express-webpack/dist/server.js:4743:13) at Route.dispatch (/Users/max/Development/test/express-webpack/dist/server.js:4724:3) at Layer.handle [as handle_request] (/Users/max/Development/test/express-webpack/dist/server.js:4524:5) at /Users/max/Development/test/express-webpack/dist/server.js:4054:22 

代码如下:

的package.json:

 { "name": "express-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "awesome-typescript-loader": "^3.0.0-beta.18", "copy-webpack-plugin": "^4.0.1", "debug": "^2.6.0", "ejs": "^2.5.5", "express": "^4.14.0", "json-loader": "^0.5.4", "source-map-loader": "^0.1.6", "webpack": "^2.2.0-rc.3" } } 

webpack.config.js

 var CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: __dirname + "/src/index.js", target: "node", output: { filename: "server.js", path: __dirname + "/dist" }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { rules: [ // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, { test: /\.json$/, loader: 'json-loader' }, // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } ] }, plugins: [ new CopyWebpackPlugin([ { from: 'src/views', to: 'views' } ]) ], node: { fs: "empty" } }; 

SRC / index.js

 var express = require('express'); var app = express(); app.set("view engine", "ejs"); app.set("views", "./views"); app.get('/', function(req, res, next){ res.render('index'); // <-- error originates here AFAIK }); app.listen(8000); 

意见/ index.ejs

 hello world 

复制步骤:

  • 运行webpack来构build项目
  • node dist/server.js启动服务器
  • 访问http://localhost:8000
  • 期望看到index.ejs的内容,而不是上面的堆栈跟踪

任何想法出了什么问题?

我深入到webpack生成的代码,我发现它似乎有一个webpack 上下文parsing评估的错误。 有一个简单的expression式,表示用来需要select的视图引擎,但是它没有解决这个问题。

为了解决这个问题,你可以在你的索引中编写

 const ejs = require("ejs").__express; const app = express(); app.set("view engine", "ejs"); app.engine('.ejs', ejs);// <-- this does the trick 

但是,如果你想要一个明确的解决scheme,打开webpack回购的问题。

我相信你的问题,它与你的捆绑文件(dist / server.js)无法访问你的依赖关系,expression,模板引擎等事实有关。为了sorting,你可以configurationwebpack,以避免捆绑依赖关系(由于您的应用程序正在从服务器/节点端运行):

 var CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: __dirname + "/src/index.js", target: "node", output: { filename: "server.js", path: __dirname + "/dist"a }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { rules: [ // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, { test: /\.json$/, loader: 'json-loader' }, // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } ] }, plugins: [ new CopyWebpackPlugin([ { from: 'src/views', to: 'views' } ]) ], node: { fs: "empty" } }; // Node module dependencies should not be bundled config.externals = fs.readdirSync("node_modules") .reduce(function(acc, mod) { if (mod === ".bin") { return acc } acc[mod] = "commonjs " + mod return acc } 

您可能还需要覆盖节点全局configuration,使用节点选项configuration使视图文件夹可从您的捆绑文件访问,更多详细信息: https : //webpack.js.org/configuration/node/#components/sidebar/sidebar。 JSX

该configuration也可以帮助你https://gist.github.com/madx/53853c3d7b527744917f