Question

我感谢webpack-starter中的所有工作，但我的思想需要更简单的东西。这就是我使用react和redux开始使用webpack的方法。我想从基础开始慢慢建立。

-simple
    -dist
        index.html
    -src
        app.component.ts
        main.ts
    package.json
    webpack.config.js

其中webpack.config.js是

const path = require('path');
module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      {
        test: /.*ts$/,
        loader: 'ts-loader',
        exclude: [
          'node_modules'
        ]
      }
    ]
  }  
}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>sto</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <my-app>Loading...</my-app>
    <script src="./bundle.js"></script> 
</body>
</html>

的package.json

{
  "name": "sto",
  "version": "1.0.0",
  "description": "",
  "main": "main.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Timothy S. McKenna <mckenna.tim@gmail.com> (http://mckennatim.github.io/mckennatim/)",
  "license": "MIT",
  "dependencies": {
      "@angular/common": "2.0.0-rc.1",
      "@angular/compiler": "2.0.0-rc.1",
      "@angular/core": "2.0.0-rc.1",      
      "@angular/platform-browser": "2.0.0-rc.1",
      "@angular/platform-browser-dynamic": "2.0.0-rc.1",
      "es6-promise": "3.1.2",
      "es6-shim": "0.35.0",
      "reflect-metadata": "0.1.2",
      "rxjs": "5.0.0-beta.6",
      "systemjs": "0.19.27",
      "typescript": "1.8.10",
      "typings": "0.8.1",
      "zone.js": "0.6.12"
  }
}

但我还没有做好

ERROR in ./src/main.ts
Module build failed: TypeError: Path must be a string. Received undefined
  at assertPath (path.js:7:11)
  at Object.dirname (path.js:697:5)
  at ensureTypeScriptInstance (c:\wamp\www\ng2\node_modules\ts-loader\index.js:156:103)
  at Object.loader (c:\wamp\www\ng2\node_modules\ts-loader\index.js:403:14)

使用Windows 7

Answer 1

一个简单的应用程序需要捆绑一些polyfill。在app/vendor.ts

中

// Polyfills
import 'es6-shim';
import 'es6-promise';
import 'zone.js/dist/zone';
import 'reflect-metadata';

webpack.config.js在插件的帮助下将它们捆绑在一起

var webpack = require("webpack");
module.exports = {
  entry: {
    "vendor": "./app/vendor",
    "app": "./app/boot"
  },
  output: {
    path: __dirname,
    filename: "./dist/[name].bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.ts/,
        loaders: ['ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"./dist/vendor.bundle.js")
  ]
}

注意：我通常不会为我正在玩的每个小应用程序执行npm install huge install。我在目录树中进一步完成了这一点，因此我们所有的ng2应用程序和探索都可以共享它们。但是，当您这样做时，exclude:['node_modules']将不会排除它们，并且您会收到错误。

我移动了index.html并添加了供应商包

<html>
  <head>
    <title>ng2-ts-webpack-0</title>
    </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
  <script src="dist/vendor.bundle.js"></script>
  <script src="dist/app.bundle.js"></script>
</html>

修改后的目录结构如下所示......

-simple
    -dist
    -src
        app.component.ts
        main.ts
        vendor.ts
    index.html    
    package.json
    webpack.config.js

现在两个package.json脚本都有效。（0.0.0.0让我在手机上看到它）

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --host 0.0.0.0 --port 6100"
  },

Answer 2

当配置文件路径未定义时，通常会发生这种情况。意味着ts-loader正在尝试加载文件，但路径未定义。如果您执行以下操作，它可能会解决它。

这里的ts-loader源代码：https://github.com/TypeStrong/ts-loader/blob/master/index.ts#L129

首先创建tsconfig.json文件并粘贴下面的代码

{ ＆＃34; compilerOptions＆＃34;：{ ＆＃34;目标＆＃34;：＆＃34; es5＆＃34;，＆＃34; sourceMap＆＃34;：是的 }，＆＃34;排除＆＃34;：[ ＆＃34; node_modules＆＃34; ] }
更新您的webpack配置

{test：/.ts(x?)$/,loader：＆＃39; ts-loader？configFileName = tsconfig.json＆＃39; }

如果这不起作用，这里有一个简单的webpack实现打字稿＆amp;＆amp;摩卡： https://github.com/thinkeloquent/webpack-es6-builder

让一个超级简单的webpack ng2启动器工作

2 个答案: