参考
入门Webpack
webpack中文文档-概念
webpack中文文档-详细配置
webpack配置及技巧

webpack.config.js

module.exports = {
  devtool: 'eval-source-map',//生成Source Maps（调试用）**【备注1】
  entry:  {//**********【备注2】
    page1: __dirname + "/app/main.js",//入口文件
    //page2: ["./src/index.js", "./src/main.js"],支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
  },
  output: {//**********【备注3】
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "[name].bundle.js",//打包后输出文件的文件名
    publicPath: "/dist/"    //网站运行时的访问路径。
  },
  resolveLoader: {//**********【备注4】
    //指定默认的loader路径，否则依赖走到上游会找不到loader
    root: path.join(__dirname, 'node_modules'),
    alias: {//给自己写的loader设置别名
      "seajs-loader": path.resolve( __dirname, "./web_modules/seajs-loader.js" )
    }
  },
  devServer: {//**********【备注5】
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
    noInfo: true,
    //hot: true,//热更新 需要搭配插件使用
    progress: true,
    port:9090, //端口你可以自定义
    proxy: {//代理
      "/api": "http://localhost:3000"
    }
  } ,
  resolve: {//*********【备注6】
    //绝对路径, 查找module的话从这里开始查找(可选)
    root: 'E:/github/flux-example/src', 
    //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    extensions: ['', '.js', '.html', '.css', '.scss'], 
    //文件快捷访问入口
    alias: { 
      src: path.resolve(__dirname, 'src'),
      components: path.resolve(__dirname, 'src/components/'),
      pages: path.resolve(__dirname, 'src/pages/'),
    },
    //取相对路径，所以比起 root ，所以会多很多路径。查找module(可选)
    modulesDirectories: [
      'node_modules',
      'bower_components',
      'lib',
      'src'
    ]
  },
  performance: {//*********【备注7】
    maxEntrypointSize: 250000, //入口文件大小，性能指示
    maxAssetSize: 250000, //生成的最大文件
    hints: 'warning', //依赖过大是否错误提示
    //允许 webpack 控制用于计算性能提示的文件
    assetFilter:function(assetFilename){
      return assetFilename.endsWith('.js');
      //以上示例将只给出 .js 文件的性能提示。
    }
  },
  module: {//**********【备注8】
    noParse: /node_modules\/(moment|chart\.js)/, //不解析
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",//**********【备注9】
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [//**********【备注10】
      new webpack.BannerPlugin('版权所有，翻版必究')//添加签名
  ],
}

.babelrc

//.babelrc
{
  "presets": ["react", "env"]
}

webpack.production.config.js

//webpack.production.config.js
module.exports = {//**********【备注--1】
  devtool: '',
  entry:  __dirname + "/app/main.js",
  output: {},
  devServer: {} ,
  module: {},
  plugins: [],
}

备注1：devtool

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

• source-map：在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
• cheap-module-source-map：在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
• eval-source-map：使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
• cheap-module-eval-source-map：这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。
对小到中型的项目中，eval-source-map是一个很好的选项。
再次强调你只应该开发阶段使用它。
cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。

备注2 入口和上下文(entry and context)

备注3 输出 output

备注4

备注5：开发中 Server(devServer)

devserver作为webpack配置选项中的一项，以下是它的一些配置选项，更多配置可参考这里

• contentBase：默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
• port：设置默认监听端口，如果省略，默认为”8080“
• inline：设置为true，当源文件改变时会自动刷新页面
• historyApiFallback：在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

在package.json中启动

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

备注6 解析(resolve)

备注7 性能(performance)

hints 打开/关闭提示 false | "error" | "warning"
maxEntrypointSize 此选项根据入口起点的最大体积，控制 webpack 何时生成性能提示。默认值是：250000 (bytes)。
maxAssetSize 此选项根据单个资源体积，控制 webpack 何时生成性能提示。默认值是：250000 (bytes)。
assetFilter 此属性允许 webpack 控制用于计算性能提示的文件。默认函数如下：

function(assetFilename) {
    return !(/\.map$/.test(assetFilename))
};

备注8：模块(module)

通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

• test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
• loader：loader的名称（必须）
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）

备注9：Babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

• 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
• 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项）

备注10 插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
插件目的在于解决 loader无法实现的其他事。

Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能

备注--1 分离配置

"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"

设置环境&&配置文件切换