• 总结
    • 更进一步

    总结

    当我们把所有东西放在一起时，我们完整的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上获得。