什么是webpack？ 一句話概括：webpack是一個模塊打包工具（module bundler）。重點在於兩個關鍵詞“模塊”和“打包”。什么是模塊呢？我們回顧一下曾經的前端開發方式，js文件通過script標簽靜態引入，js文件之間由於沒有強依賴關系，如果文件1要用到文件2的某些方法或變量 ...

使用webpack來進行打包 webpack的概念 在開始前我們需要先理解一些核心概念： 入口( ...

webpack的入口配置項表示要配置的文件就是開發環境或者生產環境 瀏覽器本身不能認識的一些東西必須經過webpack的編譯才能認識，但是要去寫的時候我們經常用到預編譯什么的比如scss比如jsx甚至vue的文件后綴名是vue而不是js，這種開發環境我們可以更加清晰明確的書寫我們的代碼。更加高 ...

1.自動清理構建目錄產物 2. 自動補齊css3前綴 3. 移動端px 自動轉化成rem 目前官方推薦我們使用vw、vh進行 ...

前置 自定義博客園樣式需要一下幾部分 頁面定制 CSS 代碼 博客側邊欄公告（支持 HTML 代碼） （支持 JS 代碼） 頁首 HTML 代碼 頁腳 HTML 代碼 你可 ...

起步 在此之前我們先npm init初始化一個項目，本地安裝webpack和webpack-cli，然后在根目錄創建index.html、webpack.config.js和src文件夾，在文件夾內再創建一個main.js作為入口文件 准備工作完成后如圖所示： main.js ...

前言 webpack 是一個當下最流行的前端資源的模塊打包器。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成少量的 bundle - 通常只有一個，由瀏覽器加載。 它是高度可配 ...

前言 該筆記是基於居玉皓老師的《Webpack實戰：入門、進階與調優》與webpack官方文檔的內容記錄的 入口起點 資源處理流程 在一切流程的最開始，我們需要指定一個或多個入口（entry），也就是告訴Webpack具體從源碼目錄下的哪個文件開始打包。 如果把工程中各個模塊的依賴關系 ...