Summary

When we put everything together, our complete webpack.config.js file looks something like this:

  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. }

Going Further

Webpack also does things like hot code reloading and code optimization which we haven't covered. For more information you can check out the official documentation. The source is also available on Github.

原文: https://angular-2-training-book.rangle.io/handout/project-setup/summary.html