ExpressJS webpack-dev-middleware中的运行Aurelia CLI Typescript（Webpack）应用程序

Question

我正在尝试使以下设置起作用：

• 标准Aurelia“ Hello World”打字稿应用程序（由CLI创建，由Webpack构建）
• 由ExpressJS应用使用webpack-dev-middleware提供
• [
我盯着“ Hello World” Aurelia应用程序，将代码移到src/frontend文件夹中，将webpack.config.js重命名为webpack-frontend.config.js，将npm脚本重命名为start-frontend，依此类推。经过这些修改后，Aurelia应用程序仍然可以正常运行。

然后，我添加了一个基本的Express JS后端应用程序，该应用程序具有自己的webpack.config.js，tsconfig.js和npm start脚本，它们也可以正常工作。

最后，我试图让Express应用通过webpack-dev-middleware来启动前端应用，如下所示：

    private applyWebpackDevMiddleware(server: Express) {
        if (Environment.isLocal()) {
            const config = require('../../webpack-frontend.config.js');
            const compiler = require('webpack')(config);

            const webpackDevMiddleware = require('webpack-dev-middleware');
            server.use(
                webpackDevMiddleware(compiler, {
                    hot: true,
                    publicPath: config.output.publicPath,
                    compress: true,
                    host: 'localhost',
                    port: Environment.getPort()
                })
            );

            const webpackHotMiddleware = require('webpack-hot-middleware');
            server.use(webpackHotMiddleware(compiler));
        }
    }

这是与webpack配置文件完全相同的文件，当直接与webpack命令一起使用时，它可以正常工作。但是像这样，我收到以下错误消息：

(node:15111) UnhandledPromiseRejectionWarning: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration should be an object.
    at webpack (/Users/will/Desktop/test/aurelia-express/node_modules/webpack/lib/webpack.js:31:9)
    at ExpressServer.applyWebpackDevMiddleware (/Users/will/Desktop/test/aurelia-express/src/backend/ExpressServer.ts:141:48)
    at ExpressServer.setup (/Users/will/Desktop/test/aurelia-express/src/backend/ExpressServer.ts:41:14)
    at Function.createApplication (/Users/will/Desktop/test/aurelia-express/src/backend/Application.ts:18:29)
    at Object.<anonymous> (/Users/will/Desktop/test/aurelia-express/src/backend/index.ts:12:13)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Module.m._compile (/Users/will/Desktop/test/aurelia-express/node_modules/ts-node/src/index.ts:439:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/will/Desktop/test/aurelia-express/node_modules/ts-node/src/index.ts:442:12)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
    at Object.<anonymous> (/Users/will/Desktop/test/aurelia-express/node_modules/ts-node/src/bin.ts:157:12)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
(node:15111) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

任何人都不能给我一些指针，为什么同一个配置文件直接在webpack中使用时可以正常工作，但是在通过webpack-dev-middleware使用时却失败了？毕竟，它在同一项目中，具有相同的node_modules，因此具有相同的Webpack版本，对吗？

或者是否有人可以共享上述工作设置？谢谢！！

我正在尝试使以下设置正常工作：标准Aurelia“ Hello World” Typescript应用程序（由CLI创建，由Webpack生成）由ExpressJS应用程序使用webpack-dev-middleware所提供的一切...]]

由ExpressJS应用使用webpack-dev-middleware提供

ExpressJS和webpack-dev-middleware的组合称为webpack-dev-server。它在开发中非常用widely：340万个存储库依赖于它。每周的安装量rate为700万。仅当您对它的功能不满意或认为可以提供更好的实现时，才用您已经开发/组装的东西替换它。否则，仅在开发中使用它，而不在生产中使用它，因为顾名思义，webpack-dev-server仅用于开发。

将所有内容组合到一个项目中，以便能够在Aurelia前端应用程序和ExpressJS后端应用程序之间共享代码

在前端和后端之间共享是很有意义的，将两个项目合并为一个则没有意义。前端和后端具有不同的运行时和开发依赖关系，您想要在生产环境中部署后端，因为后端要精简，这意味着要占用更少的空间，更安全等。因此，最好将两个项目分开并通过以下方式实现共享：] >

将前端构建工件（html文件，脚本包）从前端复制到生产环境中的后端，以使Express可以从磁盘提供工件。
• 正在开发中以利用webpack-dev-server实时重新加载等功能。>
• 使用TypeScript时（您可以使用），可以通过path mapping完成项目之间的代码共享。
• 作为一个实际例子，尽管它不使用Aurelia，但请查看此project。我是作者。
虽然winwiz1确实提供了一些非常有价值的要点（例如TypeScript路径映射），但我仍然想提出解决问题的方法，这实际上很简单：
au new创建一个带有webpack.config.js的“ Hello World”项目，该项目输出
function。但是，如果要将Webpack与Express webapck-dev-middleware一起使用，则需要object
。该对象由webpack.config.js文件中的函数返回
。因此，您所需要做的就是需要文件，然后调用该函数：

function applyWebpackDevMiddleware(server: Express) {
    server.use(express.static('static'));

    // Import the function from the webpack config and call the function
    // "false" is the "production" flag
    const config = require('../../webpack.config.js')(false);
    // then us the config object in webpack
    const compiler = require('webpack')(config)

    const webpackDevMiddleware = require('webpack-dev-middleware')
    server.use(webpackDevMiddleware(compiler, {
        writeToDisk: true,
        hot: true,
        publicPath: config.output.publicPath,
        compress: true,
        host: 'localhost',
        port: Environment.getInstance().port
    }))

    const webpackHotMiddleware = require('webpack-hot-middleware')
    server.use(webpackHotMiddleware(compiler))
}

Answer 1

由ExpressJS应用使用webpack-dev-middleware提供

Answer 2

虽然winwiz1确实提供了一些非常有价值的要点（例如TypeScript路径映射），但我仍然想提出解决问题的方法，这实际上很简单：

au new创建一个带有webpack.config.js的“ Hello World”项目，该项目输出

function。但是，如果要将Webpack与Express webapck-dev-middleware一起使用，则需要object

。该对象由webpack.config.js文件中的函数返回