這次我們主要研究的是webpack框架的相關知識，webpack是一個打包構建的前端框架，用于解決前端開發的模塊化問題。

應用場景和縱向比較

說到webpack，肯定你還會想到gulp和grunt這些框架，那么webpack是做什么的呢？他和其他的框架有什么區別呢？我們一起來分析一下。
在這一段落中我們主要對webpack和gulp進行縱向的比較分析：
webpack的根本任務是進行打包，把在一個文件中引用的另外一個文件，都打包在一起。
gulp根本任務是實現自動化，其實我們自己可以寫一段node腳本實現所有js文件的壓縮。gulp就是封裝好腳本來幫我們做這些事
還有：
webpack其實也可以實現js文件的壓縮，但是這只不過是在完成打包任務的大背景下，所完成的額外任務

那么使用場景呢？我在什么情況下該用webpack，我在什么情況下該用gulp，筆者認為，這就仁者見仁智者見智了，如果說，你就是在開發工程中為了打包，為了模塊化，那么你一定要用webpack啊，還有你希望實現解析sass直接放入html中，那么這可以用webpack實現，在打包的過程中就順手完成了。但是，你初次之外，還想實現，在上線構建的時候，把圖片上傳cdn并且替換鏈接，那么你就需要額外引入gulp。webpack和gulp都有自己的長處和短處，分析好這兩個框架，你就可以在使用過程中如魚得水。

基本配置項

基本配置項。我們首先說說如何定義基本配置項，第一是我們可以shell的方式，定義配置，都寫在命令行上，但是這種方式不好，配置項一多，執行的命令就特別長。因此我們一般采用的都是配置文件的方式。

const path = require('path');module.exports = {// entry 表示 入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。// 類型可以是 string | object | array entry: './app/entry', // 只有1個入口，入口只有1個文件entry: ['./app/entry1', './app/entry2'], // 只有1個入口，入口有2個文件entry: { // 有2個入口a: './app/entry-a',b: ['./app/entry-b1', './app/entry-b2']},// 如何輸出結果：在 Webpack 經過一系列處理后，如何輸出最終想要的代碼。output: {// 輸出文件存放的目錄，必須是 string 類型的絕對路徑。path: path.resolve(__dirname, 'dist'),// 輸出文件的名稱filename: 'bundle.js', // 完整的名稱filename: '[name].js', // 當配置了多個 entry 時，通過名稱模版為不同的 entry 生成不同的文件名稱filename: '[chunkhash].js', // 根據文件內容 hash 值生成文件名稱，用于瀏覽器長時間緩存文件// 發布到線上的所有資源的 URL 前綴，string 類型publicPath: '/assets/', // 放到指定目錄下publicPath: '', // 放到根目錄下publicPath: 'https://cdn.example.com/', // 放到 CDN 上去// 導出庫的名稱，string 類型// 不填它時，默認輸出格式是匿名的立即執行函數library: 'MyLibrary',// 導出庫的類型，枚舉類型，默認是 var// 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，libraryTarget: 'umd', // 是否包含有用的文件路徑信息到生成的代碼里去，boolean 類型pathinfo: true, // 附加 Chunk 的文件名稱chunkFilename: '[id].js',chunkFilename: '[chunkhash].js',// JSONP 異步加載資源時的回調函數名稱，需要和服務端搭配使用jsonpFunction: 'myWebpackJsonp',// 生成的 Source Map 文件名稱sourceMapFilename: '[file].map',// 瀏覽器開發者工具里顯示的源碼模塊名稱devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',// 異步加載跨域的資源時使用的方式crossOriginLoading: 'use-credentials',crossOriginLoading: 'anonymous',crossOriginLoading: false,},// 配置模塊相關module: {rules: [ // 配置 Loader{ test: /\.jsx?$/, // 正則匹配命中要使用 Loader 的文件include: [ // 只會命中這里面的文件path.resolve(__dirname, 'app')],exclude: [ // 忽略這里面的文件path.resolve(__dirname, 'app/demo-files')],use: [ // 使用那些 Loader，有先后次序，從后往前執行'style-loader', // 直接使用 Loader 的名稱{loader: 'css-loader', options: { // 給 html-loader 傳一些參數}}]},],noParse: [ // 不用解析和處理的模塊/special-library\.js$/ // 用正則匹配],},// 配置插件plugins: [],// 配置尋找模塊的規則resolve: { modules: [ // 尋找模塊的根目錄，array 類型，默認以 node_modules 為根目錄'node_modules',path.resolve(__dirname, 'app')],extensions: ['.js', '.json', '.jsx', '.css'], // 模塊的后綴名alias: { // 模塊別名配置，用于映射模塊// 把 'module' 映射 'new-module'，同樣的 'module/path/file' 也會被映射成 'new-module/path/file''module': 'new-module',// 使用結尾符號 $ 后，把 'only-module' 映射成 'new-module'，// 但是不像上面的，'module/path/file' 不會被映射成 'new-module/path/file''only-module$': 'new-module', },alias: [ // alias 還支持使用數組來更詳細的配置{name: 'module', // 老的模塊alias: 'new-module', // 新的模塊// 是否是只映射模塊，如果是 true 只有 'module' 會被映射，如果是 false 'module/inner/path' 也會被映射onlyModule: true, }],symlinks: true, // 是否跟隨文件軟鏈接去搜尋模塊的路徑descriptionFiles: ['package.json'], // 模塊的描述文件mainFields: ['main'], // 模塊的描述文件里的描述入口的文件的字段名稱enforceExtension: false, // 是否強制導入語句必須要寫明文件后綴},// 輸出文件性能檢查配置performance: { hints: 'warning', // 有性能問題時輸出警告hints: 'error', // 有性能問題時輸出錯誤hints: false, // 關閉性能檢查maxAssetSize: 200000, // 最大文件大小 (單位 bytes)maxEntrypointSize: 400000, // 最大入口文件大小 (單位 bytes)assetFilter: function(assetFilename) { // 過濾要檢查的文件return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');}},devtool: 'source-map', // 配置 source-map 類型context: __dirname, // Webpack 使用的根目錄，string 類型必須是絕對路徑// 配置輸出代碼的運行環境target: 'web', // 瀏覽器，默認target: 'webworker', // WebWorkertarget: 'node', // Node.js，使用 `require` 語句加載 Chunk 代碼target: 'async-node', // Node.js，異步加載 Chunk 代碼target: 'node-webkit', // nw.jstarget: 'electron-main', // electron, 主線程target: 'electron-renderer', // electron, 渲染線程externals: { // 使用來自 JavaScript 運行環境提供的全局變量jquery: 'jQuery'},stats: { // 控制臺輸出日志控制assets: true,colors: true,errors: true,errorDetails: true,hash: true,},devServer: { // DevServer 相關的配置proxy: { // 代理到后端服務接口'/api': 'http://localhost:3000'},contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服務器的文件根目錄compress: true, // 是否開啟 gzip 壓縮historyApiFallback: true, // 是否開發 HTML5 History API 網頁hot: true, // 是否開啟模塊熱替換功能https: false, // 是否開啟 HTTPS 模式},profile: true, // 是否捕捉 Webpack 構建的性能信息，用于分析什么原因導致構建性能不佳cache: false, // 是否啟用緩存提升構建速度watch: true, // 是否開始watchOptions: { // 監聽模式選項// 不監聽的文件或文件夾，支持正則匹配。默認為空ignored: /node_modules/,// 監聽到變化發生后會等300ms再去執行動作，防止文件更新太快導致重新編譯頻率太高// 默認為300ms aggregateTimeout: 300,// 判斷文件是否發生變化是不停的去詢問系統指定文件有沒有變化，默認每秒問 1000 次poll: 1000}, }

以上我們就是webpack中大部分的配置項，其實我們可以發現，最重要四個是entry、output、loader和plugin分別代表入口，出口，加載器和插件。具體的配置信息和其他的配置項就不一一介紹了。
建議大家看一下webpack的官方文檔，具體了解一下每一個配置項的含義，就算都記不下來，也最好有點印象。

原理初探

首先我們看一下webpack的整體原理：
初始化參數：從配置文件和 Shell 語句中讀取與合并參數，得出最終的參數；
開始編譯：用上一步得到的參數初始化 Compiler 對象，加載所有配置的插件，執行對象的 run 方法開始執行編譯；
確定入口：根據配置中的 entry 找出所有的入口文件；
編譯模塊：從入口文件出發，調用所有配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理；
完成模塊編譯：在經過第4步使用 Loader 翻譯完所有模塊后，得到了每個模塊被翻譯后的最終內容以及它們之間的依賴關系；
輸出資源：根據入口和模塊之間的依賴關系，組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是可以修改輸出內容的最后機會；
輸出完成：在確定好輸出內容后，根據配置確定輸出的路徑和文件名，把文件內容寫入到文件系統。

然后我們再看一下webpack中plugin的原理
在使用htmlWebpackPluin的過程中，發現打包出的index.html文件，js引用了兩次，由于自己了解plugin的原理，于是動手寫了一個。
webpack 的插件架構主要基于Tapable實現的，這個Tapable就是專注于事件的廣播和操作。在webpack的編譯過程中會廣播很多事件，插件可以自己去監聽這些事件，在webpack執行到相應的時機做某些操作，然后插件也可以廣播事件。
下面就是具體api的實現了，webpack中有complier對象，代表webpack實例。有編譯的具體參數。還有一個complation代表本次編譯，有打包的文件等信息。
在complier上面綁定plugin和apply。在回調函數中傳入complation對象。

plugins: [function () {this.plugin('done', (stats) => {stats.toJson(true).chunks.filter(c => c.entry).forEach(c => {let fileContent = fs.readFileSync((path.join(BUILD_PATH, 'views/main.pug'))).toString('utf-8')fs.writeFileSync(path.join(BUILD_PATH, 'views/main.pug'), fileContent.replace(/webpack\-bundle.*src="(.*)"/g, (match, p1) => {return match.replace(p1, PUBLIC_PATH + c.files[0])}))})})} ]

常見問題分析

webpack配置中遇到的問題

css-loader中importLoaders=1參數的問題
問題是加載的css文件中import了一個css文件，雖然可以被引入最后的html中，但是引入的css未經過postcss的處理，因此加上了這個，就ok了

Mac平臺和Windows平臺的差異導致的問題

// 配置entry選項時： entry: {main: __dirname + '/src/index.js' } // /和\的問題 const path = require('path'); const entryPath = path.resolve(__dirname, '/src/index.js'); entry: {main: entryPath }

不能滿足業務需求，自定義plugin的經過
如上

提高webpack構建速度的問題

縮小查找文件的范圍
利用loader中的exclude和include。
利用reslove中的moudules，這個可以在require時指明存放第三方模塊的路徑。

利用動態鏈接庫
利用插件DllPlugin，可以打包出一個個單獨的動態鏈接庫文件。原因在于包含大量復用模塊的動態鏈接庫只需要編譯一次，在之后的構建過程中被動態鏈接庫包含的模塊將不會在重新編譯，而是直接使用動態鏈接庫中的代碼。

開啟打包編譯多進程
運行在Node.js之上的webpack是單線程模型的，也就是說webpack需要處理的任務需要一件件挨著做，不能多個事情一起做。利用插件HappyPack，webpack中最耗時的就是loader這一步，HappyPack它把任務分解給多個子進程去并發的執行，子進程處理完后再把結果發送給主進程。

提取公共代碼
利用CommonsChunkPlugin插件提取公共代碼。

用過什么plugin

htmlWebpackPlugin用來自動向html文件中加入js和css的文件引入。
CommonsChunkPlugin可以打包公共部分代碼（聽說4.0已經不用了）。
HappyPack開啟多進程，加快打包速度。

總結

以上是生活随笔為你收集整理的【提高系列】webpack相关知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。