带有客户端/服务器节点设置的 Webpack？

Posted 2023-03-07

【中文标题】带有客户端/服务器节点设置的 Webpack？

【英文标题】：Webpack with a client/server node setup?

【发布时间】：2016-06-03 01:13:49

【问题描述】：

我正在尝试为带有节点后端服务器的 Angular2 应用程序设置基于 webpack 的流程。经过几个小时的努力，我设法让客户端愉快地构建，但我不知道现在如何集成我的服务器构建。我的服务器使用生成器，因此必须以 ES6 为目标，并且它需要指向不同的类型文件（main.d.ts 而不是 browser.d.ts）..

我的源代码树看起来像；

/
-- client/
-- -- <all my angular2 bits> (*.ts)
-- server/
-- -- <all my node/express bits> (*.ts)
-- webpack.config.js
-- typings/
-- -- browser.d.ts
-- -- main.d.ts

我认为客户端和服务器文件夹中的 tsconfig.json 可能会起作用，但那里没有运气。我也找不到让 html-webpack-plugin 忽略我的服务器包而不将其注入 index.html 的方法。我当前的 tsconfig 和 webpack 如下，但是有没有人成功让 webpack 捆绑这样的设置？任何指针将不胜感激。

    "compilerOptions": 
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "declaration": false,
        "removeComments": true,
        "noEmitHelpers": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    ,
    "files": [
        "typings/browser.d.ts",
        "client/app.ts",
        "client/bootstrap.ts",
        "client/polyfills.ts"
    ]

还有我的 webpack.config.js；

var Webpack = require('webpack');
var HtmlWebpackPlugin  = require('html-webpack-plugin');
var Path = require('path');

module.exports = 
  entry: 
    'polyfills': Path.join(__dirname, 'client', 'polyfills.ts'),
    'client': Path.join(__dirname, 'client', 'bootstrap.ts')
  ,
  output: 
    path:     Path.join(__dirname, 'dist'),
    filename: '[name].bundle.js'
  ,
  resolve: 
    extensions: ['', '.js', '.json', '.ts']
  ,
  module: 
    loaders: [
      
        test: /\.ts$/,
        loader: 'ts-loader',
        query: 
          ignoreDiagnostics: [
            2403, // 2403 -> Subsequent variable declarations
            2300, // 2300 -> Duplicate identifier
            2374, // 2374 -> Duplicate number index signature
            2375, // 2375 -> Duplicate string index signature
          ]
        
      ,
       test: /\.json$/, loader: 'raw' ,
       test: /\.html$/, loader: 'raw' ,
       test: /\.css$/, loader: 'raw!postcss' ,
       test: /\.less$/, loSWE: 'raw!postcss!less' 
    ]
  ,
  plugins: [
    new HtmlWebpackPlugin( template: 'client/index.html', filename: 'index.html' ),
    new Webpack.optimize.CommonsChunkPlugin('common', 'common.bundle.js')
  ]
;

【参考方案1】：

就我个人而言，我倾向于用纯 JS（现在大部分 ES2015 在 Node 中可用）和我的 Angular 2 应用程序在 Typescript 中编写我的服务器端代码，所以这个问题不会出现。但是，您可以让它与 Webpack 一起使用。

首先，您应该有两个独立的 Webpack 配置：一个用于客户端代码，一个用于服务器端。使用一个配置可能会做到这一点，但即使是这样，它也可能比它的价值更麻烦。确保在您的服务器端配置中设置target: 'node'（target: 'web' 是为客户端自动设置的）。并确保为您的服务器端文件设置了一个entry 点（我在上面没有看到，但无论如何您最终都会在单独的配置中拥有它）。

其次，你需要有多个 tsconfig 文件。默认情况下，ts-loader 将在您的根目录中查找 tsconfig.json。但是，you can tell specify another file 通过在选项对象或查询字符串/对象中设置configFileName: 'path/to/tsconfig'。

然而，这可能会导致另一个问题。您的 IDE 还将在您的根目录中查找您的 tsconfig.json 文件。如果您有两个单独的文件，您将需要一些方法来告诉您的 IDE 将哪个文件用于任何给定的文件。解决方案将取决于您的 IDE。就个人而言，我将 Atom 与 atom-typescript 一起使用，这很棒，但看起来多个 tsconfig 文件的东西是 still being worked on。幸好我从来不用担心这个问题。

至于html-webpack-plugin 问题，您不必担心，因为您不会在服务器端配置中包含该插件。但是，仅供参考，您可以将excludeChunks: ['someChunkName'] 传递给omit certain chunks，以免被包含在脚本标签中。

【讨论】：

谢谢！我认为这实际上可能是可行的，唯一的问题是..我如何让 webpack 启动（nodemon）服务器端，并在使用 webpack --watch 时重新启动它？

我不确定我是否理解问题所在。如果您使用的是 nodemon，只需在主输出文件上启动它，例如nodemon ./build/server.js。它应该在对服务器端输出文件进行任何文件更改时重新启动。如果您使用webpack ... --watch，则只要输入文件更改，输出文件就会更改。换句话说，webpack 不会负责重启你的服务器； nodemon会。那不行吗？

我刚刚想到了一些事情。你有没有考虑过你的服务器端构建是否需要 webpack？我只是认为使用tsc -p ./server -w 之类的东西可能更容易，其中./server 包含服务器端代码及其tsconfig.json 文件。

@McMath 这正是我所做的。所有服务器代码都使用tsc 编译，客户端（面向公众的代码）编译并与 webpack 捆绑。这对你有用吗？

ts-loader 选项名称应为 configFile