module.exports = {
  // __dirname值為所在文件的目錄，context默認(rèn)為執(zhí)行webpack命令所在的目錄
  context: path.resolve(__dirname, 'app'),
  // 必填項，編譯入口，webpack啟動會從配置文件開始解析,如下三種(還有一種動態(tài)加載entry的方式就是給entry傳入一個函數(shù)，這個在項目比較大，頁面很多的情況下可以優(yōu)化編譯時間)
  entry: './app/entry', // 只有一個入口，入口只有一個文件
  entry: ['./app/entry1', './app/entry2'], // 只有一個入口，入口有兩個文件
    // 兩個入口
  entry: {
    entry1: './app/entry1',
    entry2: './app/entry2'
  },
  // 輸出文件配置
  output: {
    // 輸出文件存放的目錄，必須是string類型的絕對路徑
    path: path.resolve(__dirname, 'dist'),
    // 輸出文件的名稱
    filename: 'bundle.js',
    filename: '[name].js', // 配置了多個入口entry是[name]的值會被入口的key值替換，此處輸出文件會輸出的文件名為entry1.js和entry2.js
    filename: [chunkhash].js, // 根據(jù)chunk的內(nèi)容的Hash值生成文件的名稱，其他只還有id，hash，hash和chunkhash后面可以使用:number來取值，默認(rèn)為20位，比如[name]@[chunkhash:12].js,
    // 文件發(fā)布到線上的資源的URL前綴，一般用于描述js和css位置，舉個例子，打包項目時會導(dǎo)出一些html,那么html里邊注入的script和link的地址就是通過這里配置的
    publicPath: "https://cdn.example.com/assets/", // CDN（總是 HTTPS 協(xié)議）
    publicPath: "http://cdn.example.com/assets/", // CDN (協(xié)議相同)
    publicPath: "/assets/", // 相對于服務(wù)(server-relative)
    publicPath: "assets/", // 相對于 HTML 頁面
    publicPath: "../assets/", // 相對于 HTML 頁面
    publicPath: "", // 相對于 HTML 頁面（目錄相同）
    // 當(dāng)需要構(gòu)建的項目可以被其他模塊導(dǎo)入使用，會用到libraryTarget和library
    library: 'xxx', // 配置導(dǎo)出庫的名稱，但是和libraryTarget有關(guān)，如果是commonjs2默認(rèn)導(dǎo)出這個名字就沒啥用
    // 從webpack3.1.0開始，可以為每個target起不同的名稱
    library: {
      root: "MyLibrary",
      amd: "my-library",
      commonjs: "my-common-library"
    },
    libraryTarget: 'umd', // 導(dǎo)出庫的類型，枚舉值: umd、commonjs2、commonjs，amd、this、var(默認(rèn))、assign、window、global、jsonp(區(qū)別查看補(bǔ)充2)
    // 需要單獨(dú)導(dǎo)出的子模塊，這樣可以直接在引用的時候使用子模塊，默認(rèn)的時候是_entry_return_
    libraryExport: 'default', // __entry_return_.default
    libraryExport: 'MyModule', // __entry_return_.MyModule
    libraryExport: ['MyModule', 'MySubModule '], // 使用數(shù)組代表到指定模塊的取值路徑 __entry_return_.MyModule.MySubModule
    // 配置無入口的chunk在輸出時的文件名稱，但僅用于在運(yùn)行過程中生成的Chunk在輸出時的文件名稱，這個應(yīng)該一般和插件的導(dǎo)出有關(guān)，支持和filename一樣的內(nèi)置變量
    chunkFilename: '[id].js',
    // 是否包含文件依賴相關(guān)的注釋信息，不懂？請看補(bǔ)充3，在mode為development的是默認(rèn)為true
    pathinfo: true,
    // JSONP異步加載chunk，或者拼接多個初始chunk(CommonsChunkPlugin,AggressiveSplittingPlugin)
    jsonpFunction: 'myWebpackJsonp',
    // 此選項會向應(yīng)盤寫入一個輸出文件，只在devtool啟動了sourceMap選項時采用，默認(rèn)為`[file].map`,除了和filename一樣外還可以使用[file]
    sourceMapFilename: '[file].map',
    // 瀏覽器開發(fā)者工具里顯示的源碼模塊名稱，此選項僅在 「devtool 使用了需要模塊名稱的選項」時使用，使用source-map調(diào)試，關(guān)聯(lián)模塊鼠標(biāo)移動到上面的時候顯示的地址(截不到圖啊，醉了)，默認(rèn)這個值是有的，一般不需要關(guān)心
    devtoolModuleFilenameTemplate: 'testtest://[resource-path]'
  },
  // 配置模塊相關(guān)
  module: {
    rules: [ // 配置loaders
      {
        test: /\.jsx?$/, // 匹配規(guī)則，匹配文件使用，一般使用正則表達(dá)值
        include: [path.resolve(__dirname, 'app')], // 只會命中這個目錄文件
        exclude: [path.resolve(__diranme, 'app/demo-files')], // 命中的時候排除的目錄
        use: [ // 使用的loader，每一項為一個loader，從該數(shù)組的最后一個往前執(zhí)行
          'style-loader', // loader的名稱,這樣則是使用默認(rèn)配置，可以在后面加!配置屬性，也可以用下面方式
          {
            loader: 'css-loader', // loader的名稱
            options: {} // loader接受的參數(shù)
          }
        ],
        noParse: [ // 不用解析和處理的模塊 RegExp | [RegExp] | function（從 webpack 3.0.0 開始）
          /jquery|lodash/
        ]
      }
    ]
  },
  // 配置插件，關(guān)于和loader區(qū)別見補(bǔ)充4
  plugins: [
   // 壓縮js的plugin
   new webpack.optimize.UglifyJsPlugin({
    compress: {
     warnings: false,
     drop_console: false,
    }
   }),
  ],
  // 解析文件引用的模塊的配置
  resolve: {
    // 模塊的根目錄,默認(rèn)從node_modules開始找
    modules: [
      'node_modules',
      'browser_modules'
    ],
    // 模塊的后綴名，我們引入模塊有時候不寫擴(kuò)展名，自動補(bǔ)充擴(kuò)展名的順序如下
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 模塊解析時候的別名
    alias: {
      // 那么導(dǎo)入模塊時則可以寫import myComponent from '$component/myComponent';
      $component: './src/component',
      // 末尾加$精確匹配
      xyz$: path.resolve(__dirname, 'path/to/file.js')
    },
    // 此選項決定優(yōu)先使用package.json配置哪份導(dǎo)出文件，詳見補(bǔ)充5
    mainFields: ['jsnext:main', 'browser', 'main'],
    // 是否強(qiáng)制導(dǎo)入語句寫明后綴
    enforceExtension: false,
    // 是否將符號鏈接(symlink)解析到它們的符號鏈接位置(symlink location)
    symlinks: true,
  },
  // 選擇一種 source map 格式來增強(qiáng)調(diào)試過程。不同的值會明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。
  devtool: 'source-map',
  // 配置輸出代碼的運(yùn)行環(huán)境，可以為async-node，electron-main，electron-renderer，node，node-webkit，web(默認(rèn))，webworker
  target: 'web',
  externals: { // 使用來自于js運(yùn)行環(huán)境提供的全局變量
    jquery: 'jQuery'
  },
  // 控制臺輸出日志控制
  stats: {
    assets: true, // 添加資源信息
    colors: true, // 控制臺日志信息是否有顏色
    errors: true, // 添加錯誤信息
    errorDetails: true, // 添加錯誤的詳細(xì)信息（就像解析日志一樣）
    hash: true, // 添加 compilation 的哈希值
  },
  devServer: { // 本地開發(fā)服務(wù)相關(guān)配置
    proxy: { // 代理到后端服務(wù)接口
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // 配置devserver http服務(wù)器文件的根目錄
    compress: true, // 是否開啟gzip壓縮
    hot: true, // 是否開啟模塊熱交換功能
    https: false, // 是否開啟https模式
    historyApiFallback: true, // 是否開發(fā)HTML5 History API網(wǎng)頁，不太理解TODO
  },
  profile: true, // 是否捕捉webpack構(gòu)建的性能信息，用于分析是什么原因?qū)е碌臉?gòu)建性能不佳
  cache: false, // 緩存生成的 webpack 模塊和 chunk，來改善構(gòu)建速度。緩存默認(rèn)在觀察模式(watch mode)啟用。
  cache: {
    // 如果傳遞一個對象，webpack 將使用這個對象進(jìn)行緩存。保持對此對象的引用，將可以在 compiler 調(diào)用之間共享同一緩存：
    cache: SharedCache // let SharedCache = {}
  },
  watch: true, // 是否啟用監(jiān)聽模式
  watchOptions: { // 監(jiān)聽模式選項
    ignored: /node_modules/, // 不監(jiān)聽的文件或文件夾，支持正則匹配，默認(rèn)為空
    aggregateTimeout: 300, 監(jiān)聽到變化后，300ms再執(zhí)行動作，節(jié)流，防止文件更新頻率太快導(dǎo)致重新編譯頻率太快
    poll: 1000 // 檢測文件是否變化，間隔時間
  },
  // 輸出文件的性能檢查配置
  perfomance: {
    hints: 'warning', // 有性能問題時輸出警告
    hints: 'error', // 有性能問題時輸出錯誤
    hints: false, // 關(guān)閉性能檢查
    maxAssetSize: 200000, // 最大文件大小，單位bytes
    maxEntrypointSize: 400000, // 最大入口文件的大小，單位bytes
    // 此屬性允許 webpack 控制用于計算性能提示的文件。
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  }
}

var MyLibrary = _entry_return_;
// 在一個單獨(dú)的 script……
MyLibrary.doSomething();

window["MyLibrary"] = _entry_return_;

window.MyLibrary.doSomething();

  module.exports = {};
  exports = module.exports;
  exports['aaaa'] = 1; // 這樣是可以的，在module.exports上加了一個屬性
  exports = 2; // 會導(dǎo)致exports脫離了對module.exports的引用
  modules.exports = 2 // 這樣 exports的至最后就是2

  // webpack輸出為
  exports['LibraryName'] = _entry_return_;
  // 使用庫的方法為
  require('library-name-in-npm')['LibraryName'].doSomething();
  // 原因其實(shí)就是這么導(dǎo)出最后其實(shí)是 
  // modules.exports = { [LibraryName]: _entry_return_ }

  // webpack輸出為
  module.exports = _entry_return_;
  // 使用庫的方法為
  require('library-name-in-npm').doSomething();

// webpack輸出
define("MyLibrary", [], function() {
  return _entry_return_; // 此模塊返回值，是入口 chunk 返回的值
});
// 使用
require(['MyLibrary'], function(MyLibrary) {
  // 使用 library 做一些事……
});

(function webpackUniversalModuleDefinition(root, factory) {
 if(typeof exports === 'object' && typeof module === 'object')
   module.exports = factory();
 else if(typeof define === 'function' && define.amd)
   define([], factory);
 else if(typeof exports === 'object')
   exports["MyLibrary"] = factory();
 else
   root["MyLibrary"] = factory();
 })(typeof self !== 'undefined' ? self : this, function() {
   return _entry_return_; // 此模塊返回值，是入口 chunk 返回的值
 });

MyLibrary(_entry_return_);

{
  "jsnext:main": "es/index.js", // 采用es6的入口文件
  "main": "lib/index.js", // 采用es5語法的代碼入口文件
}