注意事项

1 . 在使用webpack-dev-server的时候不要使用extract-text-webpack-plugin，它会把css独立成一个文件，这时候修改css就不能刷新浏览器，不能实时更新了。
2 . webpack在解析文件时候会通过3种路径寻找文件，一种是绝对路径，一种是相对路径，还有一种就是通过module，如果找到的是一个文件夹，就会查看该文件夹里面有没有package.json文件，如果有就依照其配置，如果没有就会按照resolve.mainFiles配置选项制定的文件名进行匹配。

各个关键词

extry: 单个入口语法，webpack从这个文件开始读取信息,可以传一个数组，会生成多个独立分离的依赖图表。

module.exports = {
  exports: './app/index.js',
}

output: 控制webpack如何向硬盘写入编译文件，虽然extry可以有多个，但是output只能有一个

module.exports = {
  output: {
    filename: 'bundle.js', //输出的名称，这里不能定义绝对路径
    path: '/build', //输出的目录，绝对路径由这里定义
    chunkFilename: { //非入口的chunk的文件名
      id: '',
      name: '',
      hash: '',
      chunkhash: ''
    },
    crossOriginLoading: '', //false: 禁止跨域 anonymous： 启用跨域发送不带credential的请求 use-credential 启用跨域加载
    devtoolLineToLine: false, //是否启用制定模块行到行映射模式。
    sourceMapFilename: [file].map, //javascript文件的sourcmap的文件名，他们在output.path目录中
    libraryTarget: 'var' //导出格式
  }
}

loaders: loader用于对模块的源代码进行转换，可以在require或者import模块时预处理文件，类似于gulp中的task

//通过webpack-config.js配置
module.export={
  module:{
    rule:[
      {
        test: /\.css$/,
        use: 'css-loader'
      }
    ]
  }
}

//通过require配置
require('style-loader!css-loader?modules!./style.css')

//通过cli配置
webpack --module-bindn jade-loader --module-bind 'css=style-loader!css-loader'

插件plugins：webpack插件是一个具有apply属性的javascript对象

module.export={
  plugins:[
    new webpack.optimize.UglifyJsPlugin(), //压缩
    new HtmlWebpackPlugin({template: './app/index.html'})
  ]
}

多个Target: 构建目标,适用于不同的环境,比如node环境、web环境等
var baseConfig = {
  target: 'async-node',
  entry: './app/index.js'
}

let targets = ['web','webworker','node','async-node','node-wekit','electron-main'].map((target) => {
  let base = webpackMerge(baseConfig,{
    target:target,
    output:{
      path: path.resolve(__dirname,'dist/'+target),
      filename: '[name].'+target+'.js'
    }
  });
  return base;
})
module.exports = targets;

常用loader