总结

当我们把所有东西放在一起时，我们完整的webpack.config.js文件看起来像这样：

  1. 'use strict';
  3. const path = require("path");
  4. const webpack = require('webpack');
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  7. const basePlugins = [
  8.   new webpack.optimize.CommonsChunkPlugin('vendor', '[name].[hash].bundle.js'),
  10.   new HtmlWebpackPlugin({
  11.     template: './src/index.html',
  12.     inject: 'body',
  13.     minify: false
  14.   })
  15. ];
  17. const envPlugins = {
  18.     production: [
  19.         new webpack.optimize.UglifyJsPlugin({
  20.             compress: {
  21.                 warnings: false
  22.             }
  23.         })
  24.     ],
  25.     development: []
  26. };
  28. const plugins = basePlugins.concat(envPlugins[process.env.NODE_ENV] || []);
  30. module.exports = {
  31.   entry: {
  32.     app: './src/index.ts',
  33.     vendor: [
  34.       '@angular/core',
  35.       '@angular/compiler',
  36.       '@angular/common',
  37.       '@angular/http',
  38.       '@angular/platform-browser',
  39.       '@angular/platform-browser-dynamic',
  40.       '@angular/router',
  41.       'es6-shim',
  42.       'redux',
  43.       'redux-thunk',
  44.       'redux-logger',
  45.       'reflect-metadata',
  46.       'ng2-redux',
  47.       'zone.js',
  48.     ]
  49.   },
  51.   output: {
  52.     path: path.resolve(__dirname, 'dist'),
  53.     filename: '[name].[hash].js',
  54.     publicPath: "/",
  55.     sourceMapFilename: '[name].[hash].js.map'
  56.   },
  58.   devtool: 'source-map',
  60.   resolve: {
  61.     extensions: ['.webpack.js', '.web.js', '.ts', '.js']
  62.   },
  64.   plugins: plugins,
  66.   module: {
  67.     rules: [
  68.       { test: /\.ts$/, loader: 'tslint' },
  69.       { test: /\.ts$/, loader: 'ts', exclude: /node_modules/ },
  70.       { test: /\.html$/, loader: 'raw' },
  71.       { test: /\.css$/, loader: 'style!css?sourceMap' },
  72.       { test: /\.svg/, loader: 'url' },
  73.       { test: /\.eot/, loader: 'url' },
  74.       { test: /\.woff/, loader: 'url' },
  75.       { test: /\.woff2/, loader: 'url' },
  76.       { test: /\.ttf/, loader: 'url' },
  77.     ],
  78.     noParse: [ /zone\.js\/dist\/.+/, /angular2\/bundles\/.+/ ]
  79.   }
  80. }

更进一步

Webpack也做类似热部署和代码优化，我们没有覆盖。有关更多信息，您可以查看官方文档。源代码也可以在Github上获得。