摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack生產環境優化:緩存 生產環境的緩存主要分為:babel緩存和文件資源緩存。 一、babel緩存配置 babel緩存 目標:讓第二次打包構建速度更快。 閱讀全文
posted @ 2023-08-21 00:27
影烏
閱讀(315)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack開發環境優化:開發調試環境配置(source-map) 一、source-map配置詳解 source-map: 種提供源代碼到構建后代碼映射技術(如 閱讀全文
posted @ 2023-08-21 00:26
影烏
閱讀(564)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack開發環境優化: HMR 熱加載功能 HMR:hot module replacement 熱模塊替換/模塊熱替換 作用:一個模塊發生變化,只會重新打包 閱讀全文
posted @ 2023-08-21 00:26
影烏
閱讀(132)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack的js兼容性處理 js兼容性檢查主要用到的 loader 有 babel-loader@8.3.0 @babel/core@7.14.6 @babel 閱讀全文
posted @ 2023-08-21 00:26
影烏
閱讀(268)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack壓縮 html 和 js 一、壓縮 js /* webpack.config.js webpack的配置文件 */ module.exports = 閱讀全文
posted @ 2023-08-21 00:26
影烏
閱讀(147)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack生產環境優化:oneOf 配置 放在oneOf代碼塊中的 loader 只會匹配一個,避免每一個文件在打包時每個loader都要過一遍。 注意:不能有 閱讀全文
posted @ 2023-08-21 00:26
影烏
閱讀(268)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack配置js 語法檢查 eslint js 語法檢查主要用到的 loader 和插件有:eslint-loader eslint eslint-confi 閱讀全文
posted @ 2023-08-21 00:25
影烏
閱讀(77)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack壓縮 CSS 文件 壓縮 CSS 文件需要使用到 optimize-css-assets-webpack-plugin插件 一、壓縮 css 文件的核 閱讀全文
posted @ 2023-08-21 00:25
影烏
閱讀(105)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack的css 兼容性處理 處理 css 兼容性需要使用到 postcss-loader 和postcss-preset-env 兩個插件 一、css 兼容 閱讀全文
posted @ 2023-08-21 00:25
影烏
閱讀(76)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack提取 CSS 成單獨文件 提取css 成單獨文件需要用到 mini-css-extract-plugin插件 一、提取 css 的核心配置 // we 閱讀全文
posted @ 2023-08-21 00:25
影烏
閱讀(121)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack生產環境基本配置 直接上webpack的配置文件webpack.config.js 這里增加了自定義js、imgs、media等目錄。 各類型資源的配 閱讀全文
posted @ 2023-08-21 00:24
影烏
閱讀(108)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack開發環境devServer配置 一、使用 devServer 為什么要使用 devServer? 答:因為在開發調試的過程中不用頻繁的去執行型打包命令 閱讀全文
posted @ 2023-08-21 00:24
影烏
閱讀(330)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack打包其他資源 其他資源:可以定位為“不需要做任務處理,只要直接打包輸出就可以的資源”,比如icon圖標資源、字體資源等 打包其他資源只需要使用到 fi 閱讀全文
posted @ 2023-08-21 00:24
影烏
閱讀(27)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack打包 html 資源 一、打包 html文件的核心配置 // webpack.config.js webpack的配置文件 // 路徑: ./webp 閱讀全文
posted @ 2023-08-21 00:24
影烏
閱讀(176)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack開發環境基本配置 直接上webpack的配置文件webpack.config.js 這里增加了自定義js、imgs、media等目錄。 各類型資源的配 閱讀全文
posted @ 2023-08-21 00:23
影烏
閱讀(71)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack打包圖片資源 一、打包圖片的核心配置 // loader的配置 module: { rules: [ //打包 css 文件的詳細loader配置 { 閱讀全文
posted @ 2023-08-21 00:23
影烏
閱讀(130)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack打包樣式資源 一、創建html文件、 css 文件或 less 文件 <!-- 文件路徑 ./src/index.html --> <!DOCTYPE 閱讀全文
posted @ 2023-08-21 00:23
影烏
閱讀(37)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack 是什么 Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成對應的靜態資源。 從圖中我 閱讀全文
posted @ 2023-08-21 00:22
影烏
閱讀(243)
評論(0)
推薦(0)
摘要:
學習筆記所使用的版本信息 學習筆記用到的npm包版本信息 nodejs@v16.14.0 webpack@4.41.6 webpack-cli@3.3.11 style-loader@1.1.3 css-loader@3.4.2 less-loader@5.0.0 less@3.11.1 html- 閱讀全文
posted @ 2023-08-21 00:21
影烏
閱讀(22)
評論(0)
推薦(0)
摘要:
轉載請注明 來源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack 五大核心概念 一、Entry 入口(Entry)指示Webpack以哪個文件為入口起點開始打包,分析構建內部依賴圖。 二、Output 輸出(Out 閱讀全文
posted @ 2023-08-21 00:21
影烏
閱讀(71)
評論(0)
推薦(0)

浙公網安備 33010602011771號