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

我正在尝试为具有节点后端服务器的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,'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$/,{ 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')
  ]
};

解决方法

就个人而言,我倾向于在普通JS中编写我的服务器端代码(大部分ES2015现在在Node中可用)和我在Textcript中的Angular 2应用程序,所以这个问题没有出现.但是,您可以使用Webpack.

首先,您应该有两个单独的Webpack配置：一个用于客户端代码,另一个用于服务器端.有可能用一个配置来做,但即使它是,它可能会比它的价值更麻烦.确保在服务器端配置中设置target: 'node'(目标：为客户端自动设置’web’).并确保为服务器端文件设置了一个入口点(我上面没有看到一个,但最终你将在一个单独的配置中进行此操作).

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

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

至于html-webpack-plugin问题,你不必担心它,因为你不会在服务器端配置中包含插件.但是,仅供参考,您可以将excludeChunks：[‘someChunkName’]传递给omit certain chunks,使其不包含在脚本标记中.

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

解决方法

相关推荐