得到一個超級簡單的webpack ng2入門工作

我很欣賞已經進入webpack-starter的所有工作，但是我的頭腦需要更簡單的東西。這就是我如何使用react和redux開始使用webpack。我想從基礎知識中慢慢構建。得到一個超級簡單的webpack ng2入門工作

-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 <[email protected]> (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

來源

2016-05-10 mcktimo

看起來相當不錯。你可以創建一個plnkr嗎？ –

這通常發生在配置文件路徑未定義時。這意味着ts-loader正在嘗試加載文件，但路徑未定義。如果你這樣做，它可能會解決它。

這裏的TS-裝載機源代碼：https://github.com/TypeStrong/ts-loader/blob/master/index.ts#L129

首先創建tsconfig。JSON文件並粘貼下面

代碼{ 「compilerOptions」：{ 「目標」：「ES5」，「sourceMap」：真 }，「排除」：[ 「node_modules」 ] }
更新您的WebPack配置

{測試：/.ts(x?)$/，裝載機： 'TS-裝載機configFileName = tsconfig.json？'}

如果還是不行，在這裏簡單的WebPack實現打字稿的& &摩卡： https://github.com/thinkeloquent/webpack-es6-builder

來源

2016-07-26 02:58:32

一個簡單的應用程序需要在捆綁一些polyfills。在這裏，在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安裝龐大的安裝每一個小應用程序，我有玩。我在目錄樹上做了更多的工作，以便它們可以被我所有的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" 
    },

來源

2016-05-14 16:47:30 mcktimo

得到一個超級簡單的webpack ng2入門工作

回答

相關問題