簡介

看《深入淺出webpack》總結一下常用的webpack的屬性的含義并加了一些自己的鏈接，寫在一個文件下更能有全局感受，更能理解各個屬性中間的關系，重點要關注entry,output,resolve,module, plugins幾部分

配置示例

這并不是一個拿來可用的配置，主要是為了更好理解常用的一些webpack屬性的作用，所以每一行都有注釋，放到一起，更能看到每一個屬性在其中的作用

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