[笔记]ng2的webpack配置

欢迎吐槽

　　前言

　　　　angular.cn教程中用的是systemjs加载器，那用webpack应该怎么配置呢？本文 demo: https://github.com/LeventZheng/angular2-practice-colloection ( 非本人，而是群里大神共享的一份资料，感谢 )。webpack通过这份文件能实现：typescript转码，html、css、图片加载，less支持，区分开发环境，热更新，启动浏览器自动打开。

　　文件结构

　　　　

 

　　如何引入

// 组件中
@Component
template: require('./app.component.html'),
styles: [
    require('./app.component.css')
 ]
//或者less支持
styles: [
　　require('./app.component.less").toString( )
]

　　config -- helper.js

var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

　　config -- webpack.dev.config.js

var webpack = require('webpack');
var helper = require('./helper.js');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');


module.exports = {
	devtool: 'cheap-module-eval-source-map',

	entry: {
	    'polyfills': './app/polyfills.ts', // 补丁包
	    'vendor': './app/vendor.ts', // 库包，包含@angular/core等
	    'app': './app/main.ts' // 入口文件
	},

	output: {
	    path: helper.root('dist'),
	    publicPath: 'http://localhost:8080/',
	    filename: '[name].js',
	    chunkFilename: '[id].chunk.js'
	},

	resolve: {
	    extensions: ['', '.js', '.ts']
	},

	module: {
	    loaders: [
	      {
	        test: /.ts$/,
	        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
	      },
	      {
	        test: /.html$/,
	        loader: 'html'
	      },
	      {
	        test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
	        loader: 'file?name=assets/[name].[hash].[ext]'
	      },
	      {
	        test: /.css$/,
	        exclude: helper.root('app'),
	        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
	      },
	      {
	        test: /.css$/,
	        include: helper.root('app'),
	        loader: 'raw'
	      }
	    ]
	},

	plugins: [
	    new webpack.optimize.CommonsChunkPlugin({
	      name: ['app', 'vendor', 'polyfills']
	    }),

	    new HtmlWebpackPlugin({
	      template: 'app/index.html'
	    }), // 新建入口文件，并自动引入全部脚本 配合浏览器自动打开插件很方便

	    new ExtractTextPlugin('[name].css'),

	    new OpenBrowserPlugin({
	      url: 'http://localhost:8080'
	    }), // 浏览器自动打开

	    new webpack.DefinePlugin({
	    	_ENV_: 'production'
	    })
    ],

    devServer: {
	    historyApiFallback: true,
	    stats: 'minimal'
	}

};

　　补丁文件-- polyfills.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
  // Production
} else {
  // Development
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

　   vendor文件-- vendor.ts

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

　　package.json ( npm start 实现热更新 )

{
  "name": "web-pc-manage-system-2",
  "version": "0.0.1",
  "description": "web-pc-manage-system-2",
  "scripts": {
    "start": "webpack-dev-server --config config/webpack.config.dev.js --inline --hot --progress --port 8080",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~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",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "^0.1.1",
    "open-browser-webpack-plugin": "0.0.2",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
　　 "to-string-loader": "^1.1.5",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }
}