webpack4入門到進階案例實戰課程

第一章 webpack4前言
第一集 webpack4入門到進階案例實戰課程介紹
簡介:講述webpack4課程大綱
第二集 webpack模塊化打包概念介紹 簡介:詳細介紹webpack，什麼是模塊化打包
webpack是什麼
webpack其實就是一個JavaScript應用程序的靜態模塊打包器。
webpack有什麼做用
模塊化打包:
webpack會將項目的資源文件當成一個一個模塊，模塊之間會有依賴關係， webpack將會對這些有依賴關係的文件進行處理，讓瀏覽器可以識別， 最後將應用程序須要的每一個模塊打包成一個或者多個bundle
第三集 webpack開發環境準備及經常使用打包模式介紹 簡介:講解webpack開發環境的搭建，打包模式和效果

1. 安裝node
   node官網地址:<https://nodejs.org/zh-cn/ 2. 建立package.json文件
   命令:npm init
2. 安裝webpack
   本地安裝:(推薦)
   npm install --save-dev webpack npm install --save-dev webpack-cli
   全局安裝:
   npm install --global webpack webpack-cli
3. 打包
   默認entry入口 src/index.js 默認output出口 dist/main.js
   打包模式:
   webpack --mode development webpack --mode production
   Package.json文件下添加scripts
   
   設置好後在命令行程序中運行npm run dev或者npm run build來進行打包。
   

第二章:webpack4配置
第一集 webpack核心配置config文件的初使用 簡介:講解webpack開發環境的搭建，打包模式和效果

1. 新建一個webpack.config.js

2. 配置入口entry(所需打包的文件路徑)

   3. 配置出口output
      (1)path指文件打包後的存放路徑
      (2)path.resolve()方法將路徑或路徑片斷的序列處理成絕對路徑
      (3)__dirname 表示當前文件所在的目錄的絕對路徑
      (4)filename是打包後文件的名稱
3. 命令行程序運行npm run dev或者npm run build
   第二集 webpack經常使用配置之入口entry和出口output的進階用法 簡介:講解入口和出口的多文件用法
   入口entry 單入口
   多文件
   在你想要多個依賴文件一塊兒注入，而且將它們的依賴導向到一個「chunk」時，傳入數組的方式就 頗有用。
   例如:
   
   多入口
   例如:
   單文件
   例如: entry:‘./src/index.js’
   
   出口output
   單出口
   
   多出口
   
   第三集 開發調試必備配置之本地服務器webpack-dev-server的搭建
   簡介:講解webpack如何配置本地服務器
4. 瞭解webpack-dev-server webpack-dev-server是webpack官方提供的一個小型Express服務器。使用它能夠爲webpack打包生成的資源
   文件提供web服務。
   webpack-dev-server 主要提供兩個功能: (1)爲靜態文件提供服務 (2)自動刷新和熱替換(HMR)
5. 安裝webpack-dev-server
   npm install --save-dev webpack-dev-server
6. 配置webpack.config.js文件
   
   4. 配置package.json
      "scripts": {
      "start": "webpack-dev-server --mode development" }
7. 在build文件夾下新建index.html文件，在html中引入bundle.js
   
   6. 在命令行程序運行npm run start 自動彈出頁面，控制檯有輸出信息
      
      願景:"讓編程不在難學，讓技術與生活更加有趣" 更多教程請訪問 xdclass.net
      第三章 webpack4 loader
      第一集 webpack加載css所需loader及其使用方式 簡介:講解css加載器的使用方式
      瞭解loader
      loader讓 webpack 可以去處理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可 以將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能 力，對它們進行處理。
      安裝loader
      安裝style-loader和css-loader
      下載:
      npm install style-loader css-loader --save-dev
      配置loader 在webpack.config.js文件裏配置module中的rules 在 webpack 的配置中 loader 有兩個目標:
8. test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。 2. use 屬性，表示進行轉換時，應該使用哪一個 loader。
   代碼:
   
   建立css文件並運行命令 建立index.css文件並import進index.js文件中
   
   第二集 webpack如何編譯less和sass文件 簡介:講解webpack編譯less和sass的方式
   Less
   處理效果
   
   編譯爲
   
   安裝loader 安裝less-loader和less
   下載:
   npm install less-loader less --save-dev 配置loader
   代碼:
   
   Sass
   處理效果
   
   編譯爲
   
   安裝loader
   安裝sass-loader和node-sass
   下載:
   npm install sass-loader node-sass --save-dev
   配置loader
   
   第三集 使用PostCSS自動添加css3瀏覽器前綴 簡介:講解PostCSS如何爲css3自動添加瀏覽器前綴
9. 處理效果
   
   編譯爲
   
10. 安裝loader
    安裝postcss-loader和autoprefixer
    下載:
    npm install --save-dev postcss-loader autoprefixer

11. 配置loader 須要和autoprefixer一塊兒用
    
    瀏覽器設置: Loader中設置:
    {
    browsers: [
    'ie >= 8',//ie版本大於等於ie8 'Firefox >= 20',//火狐瀏覽器大於20版本 'Safari >= 5',//safari大於5版本 'Android >= 4',//版本大於Android4 'Ios >= 6',//版本大於ios6
    'last 4 version'//瀏覽器最新的四個版本 ]
    }
    或者在package.json里加上下圖設置:
    

    第四集 webpack文件處理(file-loader)- 圖片處理
    簡介:講解使用file-loader處理圖片加載
    安裝loader
    下載安裝file-loader
    npm install --save-dev file-loader
    配置config文件
    
    選項配置
    
    配置options: name:爲你的文件配置自定義文件名模板(默認值[hash].[ext])

context:配置自定義文件的上下文，默認爲 webpack.config.js publicPath:爲你的文件配置自定義 public 發佈目錄 outputPath:爲你的文件配置自定義 output 輸出目錄 [ext]:資源擴展名

第五集 webpack文件處理(file-loader)- 字體文件處理
簡介:講解file-loader處理字體文件的方式
下載字體文件
以bootstrap字體文件爲例子 Boostrap字體文件下載地址:https://v3.bootcss.com/getting-started/
在index.js中引入bootstrap.css，在html中使用bootstrap字體圖標 配置config文件

第六集 webpack文件處理(file-loader)- 第三方js庫處理
簡介:講解第三方js庫的引入方式及使用方法
jquery
本地導入 編寫配置文件:
webpack.ProvidePlugin參數是鍵值對形式，鍵就是咱們項目中使用的變量名，值就是鍵所指向的庫。 webpack.ProvidePlugin會先從npm安裝的包中查找是否有符合的庫。
若是webpack配置了resolve.alias選項(理解成「別名」)，那麼webpack.ProvidePlugin就會順着設置的路徑一 直找下去
使用webpack.ProvidePlugin前須要引入webpack

子例爲庫 以

npm安裝模塊 安裝jquery庫:
npm install jquery --save-dev
直接在js裏import引入 Import $ from‘jquery’
第七集 使用babel-loader編譯ES6語法
簡介:講解webpack將ES6語法編譯成ES5語法的方式
瞭解babel
目前，ES6(ES2015)這樣的語法已經獲得很大規模的應用，它具備更加簡潔、功能更增強大的特 點，實際項目中極可能會使用採用了ES6語法的模塊，但瀏覽器對於ES6語法的支持並不完善。爲了實 現兼容，就須要使用轉換工具對ES6語法轉換爲ES5語法，babel就是最經常使用的一個工具

轉換爲

安裝依賴
babel轉化語法所需依賴項:
babel-loader: 負責 es6 語法轉化
babel-core: babel核心包 babel-preset-env:告訴babel使用哪一種轉碼規則進行文件處理
npm install babel-loader @babel/core @babel/preset-env --save-dev

配置config文件 exclude表示不在指定目錄查找相關文件

根目錄新建 .babelrc 文件配置轉換規則

另外一種規則配置

第四章 webpack4 插件
第一集 根據HTML模板自動生成HTML
簡介:講解如何使用插件根據模板自動生成html文件並關聯相關文件
瞭解html-webpack-plugin
HtmlWebpackPlugin會自動爲你生成一個HTML文件，根據指定的index.html模板生成對應的 html 文
件。

根據src下的index.html自動在打包後的目錄下生成html文件，相關引用關係和文件路徑都會按照正確的配置被添加進 生成的html裏
安裝依賴
npm install html-webpack-plugin --save-dev
配置config文件

第二集 webpack提取分離css單獨打包
簡介:講解如何從打包後的chunk文件中提取分離出css

處理效果
將全部的入口 chunk(entry chunks)中引用的css，移動到獨立分離的 CSS 文件

ExtractTextPlugin插件 安裝(下載)
npm install --save-devextract-text-webpack-plugin@next 配置config文件
引入插件:

Rules設置:

Plugins設置：

mini-css-extract-plugin插件 安裝(下載)
npm install --save-dev mini-css-extract-plugin 配置config文件
引入插件

Rules設置:

Plugins設置

第三集 壓縮css及優化css結構
簡介:講解使用插件壓縮css及優化css結構
處理效果

處理後

optimize-css-assets-webpack-plugin插件 安裝(下載)
npm install --save-dev optimize-css-assets-webpack-plugin
配置config文件
引入插件:

Plugins設置
assetNameRegExp: 正則表達式，用於匹配須要優化或者壓縮的資源名。默認值是 /.css$/g cssProcessor: 用於壓縮和優化CSS 的處理器，默認是 cssnano.

cssProcessorPluginOptions:傳遞給cssProcessor的插件選項，默認爲{}
canPrint:表示插件可以在console中打印信息，默認值是true
discardComments:去除註釋

第四集 運用webpack插件拷貝靜態文件
簡介:講解如何拷貝靜態資源文件到打包後的目錄
處理效果

處理後

安裝(下載)
npm install --save-dev copy-webpack-plugin
配置config文件
引入插件

Plugins設置

第五集 webpack插件之clean-webpack-plugin清除文件
簡介:講解如何清除以前打包的舊文件
處理效果 當咱們修改帶hash的文件並進行打包時，每打包一次就會生成一個新的文件，而舊的文件並無刪除。

爲了解決這種狀況，咱們可使用clean-webpack-plugin在打包以前將文件先清除，以後再打包出最新的文件

安裝
npm install --save-dev clean-webpack-plugin

配置config文件
引入插件

Plugin配置

注意:clean-webpack-plugin 2.0版本需改爲如下配置

dry是否模擬刪除文件，true是模擬刪除，不會移除文件，false會移除文件再從新建立
插件地址:https://www.npmjs.com/package/clean-webpack-plugin

第五章 webpack4 其餘配置
第一集 webpack處理HTML內嵌圖片
簡介:講解webpack如何處理html中引入的圖片
處理效果 未使用loader時，會出現路徑錯誤，圖片不顯示的狀況

通過loader處理後，圖片能正常顯示

安裝
cnpm install --save-dev html-loader
配置config文件
Rules中配置

第二集 webpack調試必備配置之SourceMap的類型介紹及其使用方式 簡介:講解sourcemap的做用和調試方式
瞭解sourcemap Sourcemap是爲了解決實際運行代碼(打包後的)出現問題時沒法定位到開發環境中的源代碼的問題。

devtool選項


5個基本類型: (1)eval
每一個模塊都使用 eval() 執行，每個模塊後會增長sourceURL來關聯模塊處理先後的對應關係。以下圖

因爲會映射到轉換後的代碼，而不是映射到原始代碼(沒有從 loader 中獲取 source map)，因此不能正確的顯示行 數。由於不須要生成模塊的sourcemap，所以打包的速度很快。
(2)source-map source-map會爲模塊生成獨立的soucemap文件。

打包後的模塊在模塊後面會對應引用一個.map文件，同時在打包好的目錄下會生成相應的.map文件。以下圖

(3)lnline
與source-map不一樣，增長inline屬性後，不會生成獨立的.map文件，source map 轉換爲 DataUrl 後添加到 bundle 中。以下所示:

(4) cheap cheap屬性在打包後一樣會爲每個模塊生成.map文件，可是與source-map的區別在於cheap生成的.map文件會忽
略原始代碼中的列信息,也不包含loader的sourcemap。 (5)module
包含了loader模塊之間的sourcemap，將 loader source map 簡化爲每行一個映射。
使用sourcemap調試
js調試

css調試
調試css時須要將壓縮css的插件註釋掉

Css sourcemap設置

第三集 webpack開發調試必備功能之模塊熱替換HMR
簡介:講解webpack核心知識點模塊熱替換的做用 瞭解模塊熱替換
模塊熱替換(HMR - Hot Module Replacement)功能會在應用程序運行過程當中替換、添加或刪除模塊，而無需 從新加載整個頁面。主要是經過如下幾種方式，來顯著加快開發速度:
l 保留在徹底從新加載頁面時丟失的應用程序狀態。
l 只更新變動內容，以節省寶貴的開發時間。
l 調整樣式更加快速 - 幾乎至關於在瀏覽器調試器中更改樣式。
配置config文件

Plugin設置

NamedModulesPlugin:當開啓 HMR 的時候使用該插件會顯示模塊的相對路徑 其餘配置
devServer中加入hotOnly表示只有熱更新，不會自動刷新頁面

修改js文件時代碼不會自動熱更新，需加入如下代碼能夠告訴 webpack 接受更新的模塊

第四集 區分生產環境和開發環境的配置
簡介:講解如何區分生產環境和開發環境的配置
簡單瞭解
開發環境和生產環境的構建目標差別很大。在開發環境中，咱們須要具備強大的、具備實時從新加載或熱模塊 替換能力和localhost server。 而在生產環境中，咱們的目標則轉向於關注更小的 bundle，以及資源的優化， 以改善加載時間。因此咱們一般建議爲每一個環境編寫彼此獨立的webpack 配置。
安裝
npm install --save-dev webpack-merge
配置
拆分文件
在這裏咱們能夠將webpack.config.js拆分爲三個文件，分別是webpack.common.conf.js、
webpack.dev.conf.js和webpack.prod.conf.js。

webpack.common.conf.js是放一些咱們公用的配置，好比入口entry、出口output、經常使用loader以及插 件等。
webpack.dev.conf.js是在開發環境上的配置，好比devServer配置、模塊熱替換等方便開發的配置 webpack.prod.conf.js是在生產環境上的配置，好比提取分離css、壓縮css和js等

webpack.common.conf.js

Webpack.dev.conf.js
Webpack.prod.conf.js

修改script
修改package.json文件中的script

--config能夠指定使用的配置文件

第五集 webpack打包優化技巧(1)
簡介:介紹如何優化webpack打包速度的經常使用方法
第六集 webpack打包優化技巧(2)
簡介:案例實戰之使用resolve、happypack等方法優化打包速度
減小文件搜索範圍
優化resolve.extensions配置
在導入語句沒帶文件後綴時，Webpack 會自動帶上後綴後去嘗試詢問文件是否存在。 在配置 resolve.extensions 時你須要遵照如下幾點，以作到儘量的優化構建性能:
l 後綴嘗試列表要儘量的小，不要把項目中不可能存在的狀況寫到後綴嘗試列表中。 l 頻率出現最高的文件後綴要優先放在最前面，以作到儘快的退出尋找過程。
l 在源碼中寫導入語句時，要儘量的帶上後綴，從而能夠避免尋找過程。例如在你肯定的狀況下把 require('./data') 寫成 require('./data.json') 。

優化 resolve.modules配置
resolve.modules 用於配置 Webpack 去哪些目錄下尋找第三方模塊。
resolve.modules 的默認值是 ['node_modules']，會採用向上遞歸搜索的方式查找

優化resolve.alias配置 resolve.alias配置項經過別名來把原導入路徑映射成一個新的導入路徑。

縮小文件匹配範圍
Include:須要處理的文件的位置
Exclude:排除掉不須要處理的文件的位置

設置noParse
防止 webpack 解析那些任何與給定正則表達式相匹配的文件。忽略的文件中不該該含有import,
require, define 的調用，或任何其餘導入機制。忽略大型的 library 能夠提升構建性能。好比jquery、elementUI等 庫

給babel-loader設置緩存
babel-loader提供了 cacheDirectory特定選項(默認 false):設置時，給定的目錄將用於緩存加載器的結果。

使用happyPack
HappyPack的基本原理:在webpack構建過程當中，咱們須要使用Loader對js，css，圖片，字體等文件作轉換操做，
而且轉換的文件數據量也是很是大的，且這些轉換操做不能併發處理文件，而是須要一個個文件進行處理， HappyPack的基本原理是將
這部分任務分解到多個子進程中去並行處理，子進程處理完成後把結果發送到主進程中，從而減小總的構建時間。
(1)安裝
cnpm install happypack --save-dev
(2)配置webpack.common.conf.js文件
引入happypack

Rules設置

Plugins設置

(3)npm run build打包
願景:"讓編程不在難學，讓技術與生活更加有趣" 更多教程請訪問 xdclass.net
第六章 webpack4 課程總結 第一集 課程核心知識回顧和總結
簡介:回顧總結課程核心知識點
小D課堂，願景:讓編程不在難學，讓技術與生活更加有趣
相信咱們，這個是可讓你學習更加輕鬆的平臺，裏面的課程絕對會讓你技術不斷提高 歡迎加小D講師的微信: jack794666918
咱們官方網站:https://xdclass.net
千人IT技術交流QQ羣: 718617859 重點來啦:免費贈送你乾貨文檔大集合，包含前端，後端，測試，大數據，運維主流技術文檔(持續更新) https://mp.weixin.qq.com/s/qYnjcDYGFDQorWmSfE7lpQ