webpack 配置案例for angular babel

1、dev.js:

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;

 

2、server.js:

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');

3、package.json:

{
  "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"
  }
}

4、index.js:

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);

5、test.js:

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';
  }
};

6、test2.js：

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')
	}
}