const webpack = require('webpack');

const webpackUglifyJsPlugin = require('webpack-uglify-js-plugin');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

function root(__path) {

  return path.join(__dirname, __path);

}

const config = {

    entry: [

        "webpack-hot-middleware/client?reload=true",

        // 这里是你的入口文件

        "./src/index.js",

    ],

    output: { //输出目录

        publicPath: "",

        path: __dirname,

        filename: 'bundle.js',

    },

    module: {

        rules: [{

            test: /\.jsx?$/,

            use: [{

                loader: 'babel-loader', //只需要babel就可以写ng2的代码了

                options: {

                    presets: ['es2015', 'es2016', 'es2017', 'stage-0'], //使用的presets

                    plugins: ['transform-decorators-legacy'] //使用的babel插件

                }

            }],

            exclude: /node_modules/

        }, {

            test: /\.scss$/,

            use: ExtractTextPlugin.extract({

                fallback: "style-loader",

                loader: "css-loader!autoprefixer-loader?{browsers:['last 6 Chrome versions', 'last 3 Safari versions', 'iOS >= 5', 'Android >= 4.0']}!sass-loader",

            }),

        }, {

            test: /\.png$/,

            use: {

                loader: 'file-loader',

                options: {

                    name: '../img/[name].[ext]'

                }

            }

        }]

    },

    plugins: [

        new webpack.optimize.OccurrenceOrderPlugin(),

        new webpack.ContextReplacementPlugin(  //这个是ng需要用的插件，以免报错

            // The (\\|\/) piece accounts for path separators in *nix and Windows

            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,

            root('./src'), // location of your src

            {} // a map of your routes

        ),

        new webpack.HotModuleReplacementPlugin(),

        new webpack.NoEmitOnErrorsPlugin(),

        new ExtractTextPlugin('css/style.css')

        /*new HtmlWebpackPlugin({

            title: 'index',

            hash:true,

            template: 'index.ejs', // Load a custom template (ejs by default see the FAQ for details)

        })*/

    ]

};

module.exports = config;

var webpack = require('webpack'),

    webpackDevMiddleware = require('webpack-dev-middleware'),

    webpackHotMiddleware = require('webpack-hot-middleware'),

    config = require("./config/dev.js"),

    express = require('express'),

    app = express(),

    compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {

    publicPath: config.output.publicPath,

    noInfo: true,

    stats: {

        colors: true,

        progress: true

    }

}));

app.use(webpackHotMiddleware(compiler, {

    noInfo: true,

    publicPath: config.output.publicPath

}));

app.get('*', function(req, res) {

    var fileName = req.url;

    console.log(fileName);

    if (fileName == '/') {

        res.sendFile(__dirname + '/index.html');

    }else{

        res.sendFile(__dirname + fileName);

    }

});

app.listen(8087,'0.0.0.0');

{

  "name": "wtest",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start": "node server.js",

    "build": "NODE_ENV=production&&npm run output",

    "output": "webpack --config webpack.build.js",

    "test": "node ./dist/test.js"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@angular/common": "^2.1.0",

    "@angular/compiler": "^2.1.0",

    "@angular/core": "^2.1.0",

    "@angular/http": "^2.1.0",

    "@angular/platform-browser": "^2.1.0",

    "@angular/platform-browser-dynamic": "^2.1.0",

    "@angular/router": "^3.1.0",

    "es6-promise": "3.0.2",

    "es6-shim": "^0.33.3",

    "reflect-metadata": "0.1.8",

    "rxjs": "^5.2.0",

    "zone.js": "^0.6.26",

    "autoprefixer-loader": "^3.2.0",

    "babel-core": "^6.23.1",

    "babel-loader": "^6.3.2",

    "babel-plugin-angular2-annotations": "^5.1.0",

    "babel-plugin-transform-decorators-legacy": "^1.3.4",

    "babel-preset-angular2": "^0.0.2",

    "babel-preset-es2015": "^6.22.0",

    "babel-preset-es2016": "^6.22.0",

    "babel-preset-es2017": "^6.22.0",

    "babel-preset-react": "^6.23.0",

    "babel-preset-stage-0": "^6.22.0",

    "copy-webpack-plugin": "^4.0.1",

    "css-loader": "^0.26.2",

    "extract-text-webpack-plugin": "^2.0.0",

    "file-loader": "^0.10.1",

    "html-webpack-plugin": "^2.28.0",

    "node-sass": "^4.5.0",

    "reload": "^1.1.1",

    "sass-loader": "^6.0.2",

    "style-loader": "^0.13.2",

    "uglifyjs-webpack-plugin": "^0.3.0",

    "webpack": "^2.2.1",

    "webpack-del-plugin": "^0.0.1",

    "webpack-dev-middleware": "^1.10.1",

    "webpack-dev-server": "^2.4.1",

    "webpack-hot-middleware": "^2.17.1",

    "webpack-spritesmith": "^0.3.1",

    "webpack-uglify-js-plugin": "^1.1.9"

  }

}

import 'reflect-metadata';

import 'zone.js'; //这两个是为了兼容angular2正常使用而导入的插件

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// import { enableProdMode } from '@angular/core';

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import App from './test.js';

import Test from "./test2.js";

@NgModule({

  imports: [ BrowserModule ],

  declarations: [

    App,

    Test   //声明所有的组件，这样才能使用组建

  ],

  bootstrap: [ App ] //启动组建，这样index.html 中才能使用该标签

})

class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

import { Component } from '@angular/core';

import Test from "./test2.js";

@Component({

  selector: 'my-app',

  template: `

    <h1>sdfjsdfkj</h1>

    <h2>Have {{ what }}</h2>

    <test-app [toChildData]="toChildData"></test-app>

  `

})

export default class App {

  constructor() {

    this.what = "a good time!";

    this.toChildData='sdfksdfdjs';

  }

};

import {

	Component,

	Input

} from '@angular/core';

@Component({

	selector: 'test-app',

	template: `

		<div (click)="testfn()">{{testData}}</div>  //事件促发案例

	`

})

export default class Test {

	@Input() toChildData;

	constructor() {

		this.testData = '46456654';

	}

	testfn() {

		console.log(this.toChildData);

		alert('dflksjdfj')

	}

}