用webpack2搭建angular2的项目

webpack2和angular2搭建的项目

github地址:项目链接

• npm install，安装依赖包
• npm run dev，启动本地工程，在localhost:1699进行预览

package.json

{
  "name": "angular-webpack",
  "version": "1.0.0",
  "description": "webpack2 & angular2",
  "scripts": {
    "dev": "babel-node ./src/config/dev.js"
  },
  "author": "Travis Lee",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "core-js": "^2.4.1",
    "es6-shim": "^0.35.3",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "path": "^0.12.7",
    "style-loader": "^0.18.2",
    "ts-loader": "^2.1.0",
    "typescript": "^2.3.4",
    "typings": "^2.1.1",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.5.0",
    "webpack-merge": "^4.1.0"
  }
}

webpack配置文件开发版：

import path from 'path'
import config from "./webpack.config"
import merge from "webpack-merge"
import webpack from "webpack"
import webpackDevServer from "webpack-dev-server"
import { format } from 'util'

let PORT = 1699;
let PUBLIC_PATH = "http://localhost:" + PORT + "/";
let webpackConifg = merge(config, {
    devtool: "source-map",
    //debug: true, webpack2 已切换到plugins中，据说在3中将取消
    entry: {
        main: [
            format("webpack-dev-server/client?%s", PUBLIC_PATH),
            "webpack/hot/dev-server",
            "./src/main.ts"
        ]
    },
    output: {
        path: path.resolve(__dirname, '../../dist'),
        publicPath: PUBLIC_PATH,
        filename: '[name].js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
})
const compiler = webpack(webpackConifg);
new webpackDevServer(compiler, {
    inline: true,
    hot: true,
    port: PORT,
    stats: {
        colors: true
    }
}).listen(PORT, 'localhost', (err) => {
    console.log(123)
})

搭建中遇到的问题：

• The URL 'localhost:1699/sockjs-node' is invalid，
  该问题是由于webpack配置文件中的publicPath前边没有加http://，导致url解析失败

• Uncaught reflect-metadata shim is required when using class decorators，
  这个问题是由于main.ts文件中没有引入 reflect-metadata和zone.js