Webpack配置

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',  // 开发工具
  entry: [ // 入口文件，以下是入口选项
    'webpack-hot-middleware/client',  // 用于进行热替换功能
    './index.js'  // 程序的入口文件
  ],
  output: { // 输出配置，以下是输出选项
    path: path.join(__dirname, 'dist'),
    // path表示输出的硬盘路径，不过该例中编译好的代码放在内存中，故此项无用
    filename: 'bundle.js',
    // 表示输出的文件名称
    publicPath: '/static/'
    // 表示公共路径，即所有资源的URL前缀
  },
  plugins: [ // 插件列表。被用于实现与打包相关的特定功能
    new webpack.optimize.OccurrenceOrderPlugin(),  // 用于给经常使用的模块分配最小长度的ID
    new webpack.HotModuleReplacementPlugin()  // 用于热替换
  ],
  module: {
    loaders: [ // 加载器列表
      {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: /node_modules/,
        include: __dirname
        // __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
      }
      // 上述的意思是除了/node_modules/目录下的文件之外，其他所有符合/\.js$/正则表达式的文件都将使用babel-loader编译
    ]
  }
};

针对Webpack各项配置的介绍

• devtool
  • devtool是开发工具，它的作用是生成源代码映射(Source Map)，方便调试
  • devtool的作用：源代码映射记录了打包编译后的代码和源代码之间的位置对应关系。它可以让你在控制台查找日志（或错误）来源时，直接跳转到源代码中，而不是打包编译后的代码。更多开发工具模式
  • cheap-module-eval-source-map，这个模式构件速度适中，而且会生成较好的源代码映射，适合在开发环境中使用
• webpack-hot-middleware/client
  • 工作原理：先连接上服务器，等着接受需要重新编译代码的通知，一旦代码变动，就会收到通知进而更新客户端代码。

未完待续