#！相同的key是多选择的输入其一即可
var path = require('path');

module.exports = {
  entry: "./app/entry", // 单文件打包
  entry: ["./app/entry1", "./app/entry2"], //多文件打包成一个
  entry: { //多文件单个打包
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },
  output: {
    path: path.resolve(__dirname, "dist"), // string 所有输出文件的目标路径
    filename: "bundle.js", // 输出文件的文件名（固定）
    filename: "[name].js", // 用于多个入口点多输出文件
    filename: "[chunkhash].js", //  版本号
    publicPath: "/public/", // 指定资源文件引用的目录 
    publicPath: "https://cdn.example.com/", // 输出解析文件的目录，url 相对于 HTML 页面
    library: "MyLibrary", // string, // 导出库(exported library)的名称
    libraryTarget: "umd", // 通用模块定义 
    libraryTarget: "umd2", // 通用模块定义
    libraryTarget: "commonjs2", // exported with module.exports
    libraryTarget: "commonjs-module", // 使用 module.exports 导出
    libraryTarget: "commonjs", // 作为 exports 的属性导出
    libraryTarget: "amd", // 使用 AMD 定义方法来定义
    libraryTarget: "this", // 在 this 上设置属性
    libraryTarget: "var", // 变量定义于根作用域下
    libraryTarget: "assign", // 盲分配(blind assignment)
    libraryTarget: "window", // 在 window 对象上设置属性
    libraryTarget: "global", // property set to global object
    libraryTarget: "jsonp", // jsonp wrapper// 导出库(exported library)的类型
  },

  module: {
    // 关于模块配置
    rules: [
      // 模块规则（配置加载器、解析器等选项）
      {
        test: /\.jsx?$/,  // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
        include: [ // test 和 include 具有相同的作用，都是必须匹配选项
          path.resolve(__dirname, "app")
        ],
        exclude: [// exclude 是必不匹配选项（优先于 test 和 include）
          path.resolve(__dirname, "app/demo-files")
        ]
        // 最佳实践：
        // - 只在 test 和 文件名匹配 中使用正则表达式
        // - 在 include 和 exclude 中使用绝对路径数组
        // - 尽量避免 exclude，更倾向于使用 include

        issuer: { test, include, exclude },// issuer 条件（导入源）
        enforce: "pre", //指定 loader 种类。没有值表示是普通 loader。
        enforce: "post",
        loader: "babel-loader",
        // 应该应用的 loader，它相对上下文解析
        // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
        options: {
          presets: ["es2015"]
        },
        // loader 的可选项
      },
      {
        test: "\.html$"
        use: [// 应用多个 loader 和选项
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },
      { oneOf: [ /* rules */ ] }
      // 只使用这些嵌套规则之一

      { rules: [ /* rules */ ] }
      // 使用所有这些嵌套规则（合并可用条件）

      { resource: { and: [ /* 条件 */ ] } }
      // 仅当所有条件都匹配时才匹配

      { resource: { or: [ /* 条件 */ ] } }
      { resource: [ /* 条件 */ ] }
      // 任意条件匹配时匹配（默认为数组）

      { resource: { not: /* 条件 */ } }
      // 条件不匹配时匹配
    ],
  },

  resolve: {// 解析模块请求的选项（不适用于对加载器(loader)解析）

    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ], // 用于查找模块的目录

    extensions: [".js", ".json", ".jsx", ".css"], // 使用的扩展名

    alias: { // 模块别名列表

      "module": "new-module",
      // 起别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"

      "only-module$": "new-module",
      // 起别名 "only-module" -> "new-module"，但不匹配 "module/path/file" -> "new-module/path/file"

      "module": path.resolve(__dirname, "app/third/module.js"),
      // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
      // 模块别名相对于当前上下文导入
    },
  },

  performance: {
    hints: "warning", // 枚举
    maxAssetSize: 200000, // 整数类型（以字节为单位）
    maxEntrypointSize: 400000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: "source-map", // enum
  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  // 牺牲了构建速度的 `source-map' 是最详细的。

  context: __dirname, // string（绝对路径！）
  // webpack 的主目录
  // entry 和 module.rules.loader 选项
  // 相对于此目录解析

  target: "web", // 枚举
  // 包(bundle)应该运行的环境
  // 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)

  externals: ["react", /^@angular\//],
  // 不要遵循/打包这些模块，而是在运行时从环境中请求他们

  stats: "errors-only",
  // 精确控制要显示的 bundle 信息

  devServer: {
    /* TODO */
  },

  plugins: [
   
  ],

常用webpack 插件

• html-webpack-plugin

自动快速的帮我们生成HTML。
title: 用来生成页面的 title 元素
filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
template: 模板文件路径，支持加载器，比如 html!./index.html
inject: true | 'head' | 'body' | false  ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块) 
---示例代码
{
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html 
    new HtmlWebpackPlugin({  // Also generate a test.html 
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

• css-loader style-loader

样式文件，我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。
示例代码
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

• babel-loader css-loader style-loader

babel-loader 进行转码
示例代码
module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader?presets[]=es2015'
    }
  ]
}

• sass-loader node-sass

css预编译程序，还需要添加node-sass来解析sass文件

• url-loader

图片自动转成base64编码的
module.exports = {  
    entry:['./app/entry.js'],  
    output:{  
        path:'./build',  
        filename:'bundle.js'  
    },  
    devServer: {//设置开发者工具的端口号  
        inline: true,  
        port: 8181  
    },  
    module:{  
        loaders:[  
            {  
             test:/\.css$/,  
             loader:'style!css'  
            },  
            {   test: /\.(png|jpg|jpeg|gif)$/,  
                loader: 'url-loader?limit=8192'  
            }  
            /*{ 
                test: /\.(png|jpg|jpeg|gif)$/, 
                loader: 'url-loader?limit=1000000&name=img/[name].[ext]' 
            }*/  
        ]  
    },  
    plugins:[  
        new webpack.BannerPlugin('Created by panca on 16/11/25. QQ:643691522')  
    ]  
}

• babel-preset-es2015

添加ES6的支持

• autoprefixer-loader

添加浏览器前缀

• CommonsChunkPlugin

提取代码中的公共模块
new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js

• extract-text-webpack-plugin

从bundle中提取出特定的text到一个文件中。使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来
---示例代码
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

• copy-webpack-plugin

拷贝资源插件
---示例代码
new CopyWebpackPlugin([{
    from: __dirname + '/src/public'
}]),

• webpack.ProvidePlugin [webpack内置插件 ]

全局挂载插件
new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
}))