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

 願景:"讓編程不在難學，讓技術與生活更加有趣" 更多教程請訪問xdclass.net

第一章 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

3.安裝webpack

本地安裝:(推薦)

npm install --save-dev webpack npm install --save-dev webpack-cli

全局安裝:

npm install --global webpack webpack-cli

 4.打包

默認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是打包後文件的名稱

4. 命令行程序運行npm run dev或者npm run build

第二集 webpack經常使用配置之入口entry和出口output的進階用法

簡介:講解入口和出口的多文件用法

入口entry

              單入口

                       單文件

                                例如: entry:‘./src/index.js’

                      多文件

                      在你想要多個依賴文件一塊兒注入，而且將它們的依賴導向到一個「chunk」時，傳入數組的方式就 頗有用。

                      例如:

 

​

             多入口

             例如:

​           

 

出口output

           單出口

         

 

​

          多出口

​

第三集 開發調試必備配置之本地服務器webpack-dev-server的搭建

簡介:講解webpack如何配置本地服務器

1. 瞭解webpack-dev-server webpack-dev-server是webpack官方提供的一個小型Express服務器。使用它能夠爲webpack打包生成的資源

文件提供web服務。
webpack-dev-server 主要提供兩個功能:

(1)爲靜態文件提供服務 

(2)自動刷新和熱替換(HMR)

2. 安裝webpack-dev-server
npm install --save-dev webpack-dev-server

3. 配置webpack.config.js文件

​

 

4. 配置package.json
"scripts": {
"start": "webpack-dev-server --mode development" }

5. 在build文件夾下新建index.html文件，在html中引入bundle.js

​

 

6. 在命令行程序運行npm run start

自動彈出頁面，控制檯有輸出信息

​

 

第三章 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 有兩個目標:

     1. 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自動添加瀏覽器前綴

1. 處理效果

​

 

編譯爲

​

 

2. 安裝loader

         安裝postcss-loader和autoprefixer
         下載:
          npm install --save-dev postcss-loader autoprefixer

3. 配置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]:資源擴展名

[name]:資源的基本名稱

[path]:資源相對於 context的路徑

[hash]:內容的哈希值

第五集 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‘jqu

 第七集 使用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)安裝

​
(2)配置webpack.common.conf.js文件
引入happypack

Rules設置

​

 

Plugins設置

 

​

(3)npm run build打包

第六章 webpack4 課程總結

第一集 課程核心知識回顧和總結

簡介:回顧總結課程核心知識點

小D課堂，願景:讓編程不在難學，讓技術與生活更加有趣

相信咱們，這個是可讓你學習更加輕鬆的平臺，裏面的課程絕對會讓你技術不斷提高

歡迎加小D講師的微信: jack794666918
咱們官方網站:https://xdclass.net
千人IT技術交流QQ羣: 718617859

重點來啦:免費贈送你乾貨文檔大集合，包含前端，後端，測試，大數據，運維主流技術文檔(持續更新) https://mp.weixin.qq.com/s/qYnjcDYGFDQorWmSfE7lpQ

 

 

 

 

 

 

 

 

 

 

 

 

@font-face { font-family: "Times New Roman"; }@font-face { font-family: "宋體"; }@font-face { font-family: "Calibri"; }p.MsoNormal { margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt; }h1 { margin-top: 5pt; margin-bottom: 5pt; text-align: left; font-family: 宋體; font-weight: bold; font-size: 24pt; }h2 { margin-top: 5pt; margin-bottom: 5pt; text-align: left; font-family: 宋體; font-weight: bold; font-size: 18pt; }h3 { margin-top: 5pt; margin-bottom: 5pt; text-align: left; font-family: 宋體; font-weight: bold; font-size: 13.5pt; }p.pre { margin: 0pt 0pt 0.0001pt; text-align: left; font-family: 宋體; font-size: 12pt; }p.p { margin: 5pt 0pt; text-align: left; font-family: Calibri; font-size: 12pt; }span.msoIns { text-decoration: underline; color: blue; }span.msoDel { text-decoration: line-through; color: red; }div.Section0 { }