一、简介

Webpack是一个模块打包器。Webpack可以把一个单独的任务管理器捆绑在一起，但是由于社区开发的webpack插件，bundler和task runner之间的界限变得模糊了。有时候，这些插件被用来执行通常在webpack
之外完成的任务，例如清理构建目录或部署构建。

• 参考资料：https://survivejs.com/webpack/what-is-webpack/ （英文网站，需要翻译）

二、webpack的扩展

• html-webpack-plugin ：建立一个html模板，自动插入打包的js

//...
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
//...
plugins:[
    new HtmlWebpackPlugin({ title: 'Webpack demo' })
]

• favicons-webpack-plugin： 处理favicons
• SourceMapDevToolPlugin：资源地图映射

 plugins: [
    new webpack.SourceMapDevToolPlugin({
      // Match assets just like for loaders.
      test: string | RegExp | Array,
      include: string | RegExp | Array,

      // `exclude` matches file names, not package names!
      exclude: string | RegExp | Array,

      // If filename is set, output to this file.
      // See `sourceMapFileName`.
      filename: string,

      // This line is appended to the original asset processed. For
      // instance '[url]' would get replaced with an url to the
      // sourcemap.
      append: false | string,

      // See `devtoolModuleFilenameTemplate` for specifics.
      moduleFilenameTemplate: string,
      fallbackModuleFilenameTemplate: string,

      module: bool, // If false, separate sourcemaps aren't generated.
      columns: bool, // If false, column mappings are ignored.

      // Use simpler line to line mappings for the matched modules.
      lineToLine: bool | {test, include, exclude}
    }),
  ]

• webpack.optimize.UglifyJsPlugin：压缩j

plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,

          // Drop `console` statements
          drop_console: true
        }
      })
    ]

• webpack-merge：可以把分开配置的config合并，分开生产环境和调试环境

const merge = require('webpack-merge');
const commonConfig= {...};

var config;
config = merge(commonConfig, {});

• webpack-dev-server：自刷新页面，更改代码后可以自动刷新，最常用的module

exports.devServer = function(options) {
  return {
      //如果devserver的基本配置有问题，可以设置watchOptions去解决
     watchOptions: {
      // Delay the rebuild after the first change
      aggregateTimeout: 300,
      // Poll using interval (in ms, accepts boolean too)
      poll: 1000
    },
    devServer: {
      // Enable history API fallback so HTML5 History API based
      // routing works. This is a good default that will come
      // in handy in more complicated setups.
      historyApiFallback: true,

      // Unlike the cli flag, this doesn't set
      // HotModuleReplacementPlugin!
      hot: true,
      inline: true,

      // Display only errors to reduce the amount of output.
      stats: 'errors-only',

      // Parse host and port from env to allow customization.
      //
      // If you use Vagrant or Cloud9, set
      // host: options.host || '0.0.0.0';
      //
      // 0.0.0.0 is available to all network devices
      // unlike default `localhost`.
      host: options.host, // Defaults to `localhost`
      port: options.port // Defaults to 8080
    },
    plugins: [
      // Enable multi-pass compilation for enhanced performance
      // in larger projects. Good default.
      new webpack.HotModuleReplacementPlugin({
        multiStep: true
      })
    ]
  };
}

• source-map：init时会慢，之后rebuild快

devtool: 'source-map'