// 如果遇到找不到webpack的情况，先npm install一个本地的webpack
// 之后运行本地的webpack，如果还提示缺少包比如enhanced-resolve
// 那么在安装这些缺少包，就能通过本地成功运行
var webpack = require('webpack');

// 这里相当于注册了一个全局变量（插件）
// 插件可以给全局使用，所以能用这两个常量了
var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
  __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || false))
});
// common为要生成的文件名，路径同其他文件
// 这样会合并相同的代码，但是在引入时必须先引入common在引入指定内容
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common');

module.exports = {
  // 这个是入口地址
  entry: {
    Main: './main.js',
    Extra: './extra.js'
  },
  output: {
    // 图片和js的存储路径
    path: './build',
    // 生成图片的地址(给图片引用加前缀)
    publicPath: './build/',
    // 这是输出文件的地址
    // filename: 'bundle.js'
    filename: '[name].js' // 参考entry的key
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        // 用!链式调用，从前到后（应该和管道差不多）
        loader: 'style!css'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        // 载入多个模块
        loader: 'babel!eslint',
      },
      {
        // 内联的base64图片地址，图片要小于8k
        // 超过指定大小就无法处理，error，需要安装file-loader，即可引用原来的文件
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      }
      // {test: /\.js$/, loaders: [ "babel-loader", "eslint-loader" ], exclude: /node_modules/, query: {presets: ['es2015']}}
    ]
  },
  resolve: {
    // 可以不用扩展名引入文件
    extensions: ['', '.js', '.json', '.css']
  },
  plugins: [definePlugin, commonsPlugin]
};