Webpack configuration case 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",//here is your entry file "./src/index.j S ",], Output: {//Outputs directory Publicpath:" ", Path: __dirname, filename: ' Bundle.js ',}, module : {rules: [{test:/\.jsx?$/, use: [{loader: ' Babel-loader ',//Only need Babel to write n                    G2 code options: {presets: [' es2015 ', ' es2016 ', ' es2017 ', ' stage-0 '],//use of presets Plugins: [' transform-decorators-legacy '//Used Babel plugin}}], exclude:/n Ode_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 ', option S: {name: '. /img/[name].        [Ext] '}}]}, plugins: [New Webpack.optimize.OccurrenceOrderPlugin (), New Webpack. Contextreplacementplugin (//This is the plugin that NG needs to avoid error//the (\\|\/) piece accounts for path separators in *nix and Win  Dows/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 Templat E (Ejs by default see the FAQs 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.J S "," 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/plat Form-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 "," Au Toprefixer-loader ":" ^3.2.0 "," Babel-core ":" ^6.23.1 "," Babel-loader ":" ^6.3.2 "," Babel-plugin-angular2-annotatio NS ":" ^5.1.0 "," babel-plugin-transform-decorators-legacy ":" ^1.3.4 "," babel-preset-angular2 ":" ^0.0.2 "," BABEL-PR eset-es2015 ":" ^6.22.0 ",    "babel-preset-es2016": "^6.22.0", "babel-preset-es2017": "^6.22.0", "babel-preset-react": "^6.23.0", "babel-p Reset-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 "," we Bpack-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 '; These two are imported plugins for compatibility with angular2 normal use import {platformbrowserdynamic} from ' @angular/platform-browser-dynamic ';//import { Enableprodmode} from ' @angular/core ', import {ngmodule} from ' @angular/core ', import {browsermodule} from ' @angular/pla Tform-browser '; import App from './test.js '; Import test from "./test2.js"; @NgModule ({  imports: [Browsermodule],  declarations: [    app,       Test   //Declare all components so that you can use build  ],  bootstrap: [app]//Start build, so index.html In order to use the label}) class Appmodule {}platformbrowserdynamic (). Bootstrapmodule (Appmodule);

5, Test.js:

Import {Component} from ' @angular/core '; the import Test from "./test2.js"; @Component ({  selector: ' My-app ',  Template: '    
6, Test2.js:
Import {component,input} from ' @angular/core '; @Component ({selector: ' Test-app ', Template: ' <div (click) = ' testfn () ' >{{testData}}</div>  //Event promotion case '} ' export default class Test {@Input () Tochilddata;constructor () { This.testdata = ' 46456654 ';} Testfn () {console.log (this.tochilddata); alert (' DFLKSJDFJ ')}}
　　
Webpack configuration case for angular Babel