webpack的我的理解（一）

1、構建工具的介紹

關於構建工具，我用過的也就webpack,gulp稍微有些瞭解，可是沒在項目中真正用到。以個人理解，構建工具能實現的功能：

1. 代碼轉換： 從typescript->JavaScript，sass->css等；

2.  代碼優化： 壓縮HTML、css代碼等；

3. 代碼分割： 將通用的代碼從多個文件中抽取出來；大文件切割成小文件；

4. 模塊合併： 模塊化項目裏會有不少模塊，好比一個模塊引用了另外一個模塊這樣子。構建工具能夠將多個模塊合併成一個模塊；

5. 自動刷新： 監聽代碼的變化，對代碼進行實時刷新；

6. 在代碼提交到代碼倉庫以前進行代碼校驗，看是否符合規範或者單元測試是否經過；

7. 自動發佈： 代碼更新完畢以後，自動構建發佈代碼並傳輸給發佈系統進行發佈。

2、webpack是什麼

關於webpack的做用，官網的一個圖其實就說明了一切。

webpack是一個打包模塊化JavaScript的工具。在webpack裏一切文件皆模塊。這樣的好處是能夠清楚的瞭解各模塊之間的依賴關係，以便webpack進行組合與打包。打包的過程當中：經過loader將webpack不能處理的文件轉換成它能處理的文件，而後再經過plugins進行功能的擴展，好比壓縮文件、分割文件的處理等，而後進行打包。

3、webpack的優缺點

優勢：

1. 專一於模塊化項目；

2. plugins能作的事情很是多；

3. 社區活躍。 

缺點： 

一、官方文檔很是難懂，不利於學習；

2. plugins繁多，須要不斷的學習才能靈活掌握；

3. 對初學者不利，調試很難定位問題。。

4、webpack核心概念

mode: 模式。在webpack4新引入的。能夠配置成production、development兩種值，而單元測試也屬於開發模式下的。

entry： 入口。webpack執行的構建的第一步。

entry: {    
    // 入口 （多個文件做爲一個入口 全局使用babel-polyfill  polyfill將會被打包進這個入口文件中, 並且是放在文件最開始的地方）    
    app: ['babel-polyfill', './src/main.js']
}複製代碼

上面的例子是單頁面項目配置的入口，只有一個入口文件，而babel-polyfill是一個轉換js標準的工具，再加上.babelrc裏的配置，就能夠實現js標準處理

module： webapck中一切皆模塊，webapck會從entry開始遞歸找到全部的依賴。在module.rules裏進行loader的配置

module: {
    rules: [{        
        test: /\.js$/,        
        loader: 'babel-loader', // js處理        
        include: [ // Rule.include 是 Rule.resource.include 的簡寫。若是你提供了 Rule.include 選項，就不能再提供 Rule.resource          
            resolve('src'),          
            resolve('test'),          
            resolve('node_modules/webpack-dev-server/client')        
        ]      
    },
      ...    
    ]
}複製代碼

devtool:  用哪種sourceMap來處理。sourceMap的概念，簡單理解，就是咱們寫的代碼，在通過構建工具的處理後，若是在調試的時候出現什麼錯誤，因爲代碼已經進行過了處理，若果不在處理前就標記好代碼的各類信息，處理後沒法定位問題，而sourceMap就是作標記的工做。好比說標記代碼的行信息，列信息等等。用不一樣的模式下的souceMap，獲得的代碼信息不太同樣。

devtool: config.build.productionSourceMap ? config.build.devtool : false,複製代碼

resolve： 模塊解析的相關配置。好比文件查找的優先級等

resolve: {    
    // 模塊解析相關的配置    
    extensions: ['.js', '.vue', '.json'], // 這裏的順序表明匹配後綴的優先級，例如對於 index.js 和 index.jsx，會優先選擇 index.js    
    alias: { // 若是咱們有某個模塊及其經常使用，常常編寫相對路徑很麻煩，就能夠在此處配置某個模塊的別名      
        '@': resolve('src')    
    }  
},複製代碼

performance:  性能配置，裏面的配置項能控制webpack如何通知資源和入口超過指定文件限制。

performance: {
    hints: 'warning', // 警告 室還有一個值是error
    maxAssetSize: 30000000, // 整數類型（以字節爲單位） 資源(asset)是從 webpack 生成的任何文件。此選項根據單個資源體積，控制 webpack 什麼時候生成性能提示。默認250000    maxEntrypointSize: 50000000 // 整數類型（以字節爲單位） 默認250000 此選項根據入口起點的最大致積，控制 webpack 什麼時候生成性能提示
}複製代碼

plugins: 配置插件

plugins: [
    new minCssExtractPlugin({ // 該插件用於將css提取到單獨的文件，以便多個頁面共享一個css文件
        filename: utils.assetsPath('css/[name].[contenthash:8].css'),
        chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
    })
]複製代碼

optimization: 優化打包的配置

optimization: { // 優化    
    splitChunks: { // 動態導入模塊，webpack4+的全新通用分塊策略配置    
        chunks: 'all',    
        cacheGroups: {      
            libs: {        
                name: 'chunk-libs',        
                test: /[\\/]node_modules[\\/]/,        
                priority: 10,        
                chunks: 'initial' // 只打包初始時依賴的第三方      
            },      
            elementUI: {          
                name: 'chunk-elementUI', // 單獨將 elementUI 拆包          
                priority: 20, // 權重要大於 libs 和 app 否則會被打包進 libs 或者 app          
                test: /[\\/]node_modules[\\/]element-ui[\\/]/        
            }      
        }    
    },    
    runtimeChunk: 'single', // 值 "single" 會建立一個在全部生成 chunk 之間共享的運行時文件    
    minimizer: [ //容許你經過提供一個或多個定製過的 TerserPlugin 實例，覆蓋默認壓縮工具(minimizer)。      
        new UglifyJsPlugin({        
            uglifyOptions: {          
                mangle: { // 混淆            
                    safari10: true          
                }        
            },        
            sourceMap: config.build.productionSourceMap, // 編譯後代碼對源碼的映射，用於網頁調試        
            cache: true,        
            parallel: true      
        }),      
        // 壓縮提取的CSS。使用此插件減小來自不一樣組件的可能重複的CSS      
        new OptimizeCSSAssetsPlugin()    
    ]  
}複製代碼

output: 通過一系列處理，獲得想要的結果。

output: {    
    path: config.build.assetsRoot,    
    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),    
    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
},複製代碼

Webpack 在啓動後會從 Entry裏配置的 Module 開始，遞歸解析 Entry 依賴的全部 Module 每找到一個 Module ，就會根據配置的 Loader 去找出對應的轉換規則，對 Module 進行轉換後， 再解析出當前 Module 依賴的 Module 這些模塊會以 Entry爲單位進行分組， Entry 及其 全部依賴的 Module 被分到 個組也就是 Chunk 。最後， Webpack 將全部 Chunk 轉換成 文件輸出。在整個流程中， Webpack 會在恰當的時機執行 Plugin 義的邏輯。