碼上歡樂
相關內容    簡體    繁體

webpack基本使用及基本配置

本文轉載自   查看原文   2021-01-28 10:41   819 

什么是webpack?

webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具；它可以看作是一個模塊打包機，通過一個入口主文件，找到與其相關所有的文件，將這些文件編譯打包成瀏覽器可以識別的語言（vue，ts，less，es6一些高級語法等等）；它可以完美實現資源的合並、打包、壓縮（包括將圖片轉換為base64）、混淆等諸多功能。

1 webpack安裝的兩種方式

  1. 運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中

這兩種方式一種是全局安裝，一種是局部項目內安裝，那么下面我示例采用本地安裝的方式

安裝完畢webpack，還需要安裝一下webpack-cli，最好使用3版本，其他版本不穩定會經常出現問題；如：

npm install webpack-cli@3 -D

2.建立練習項目

 

在這里項目中，創建了圖中的相關文件目錄，主要的用途如下：

  • dist ：用於構建生存壓縮文件，例如 bundle.js 等壓縮文件。
  • src : 用於存放開發源代碼文件
    • css ： 用於存放源代碼css文件
    • images：用於存放源圖片文件
    • js： 用於存放源 js 文件
    • index.html: 源html文件
    • main.js ： 入口js文件

這里main.js是用來作為單一入口 js 文件，所有需要引入的 js以及 css 都可以在這里編寫，統一提供html文件進行引入。

package.json和webpack.config.js這兩個文件可以先不用建，為了后續打包用的

建立好文檔結構之后，在根目錄下初始化package.json文件，執行：

npm init -y

3 在index.html編寫 li 標簽，稍后在 main.js 編寫樣式

為了更好演示壓縮 js、css的示例，下面先來編寫一個 ul 無序列表，用來間隔改變顏色。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webPack基礎用法</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</body>

</html>
<script src="./main.js"></script>

4. main.js 中通過import引入一個js文件，並且編寫樣式（瀏覽器是不會識別import的）

/* 
  這是入口主文件，webpack會根據這個主文件找到項目中其他所有的依賴文件  
  需要在html中引入該文件
*/

// 1\. 導入 一個js文件  (由於是webpack基本使用，建議引入自己寫的一個文件，引入其他官方的比如jq，會有更高級的js語法不能識別)
// import *** from *** 是ES6中導入模塊的方式 由於 ES6的代碼，太高級了，瀏覽器解析不了，所以，這一行執行會報錯
import test from "./js/test.js"

5. test.js 用來修改樣式

var li = document.getElementsByTagName("li");
Array.from(li).forEach((item,index)=>{
  if(index % 2 == 0){
    item.style.backgroundColor = "red"
  }else{
    item.style.backgroundColor = "black"
  }
})

做完以上操作；打開頁面，發現報錯，因為import *** from *** 是ES6中導入模塊的方式 由於 ES6的代碼，太高級了，瀏覽器解析不了，所以，這一行執行會報錯；

 

 

 那怎么辦呢？可以使用webpack進行壓縮轉化為瀏覽器可以執行的js文件。

6. 首先創建webpack的配置文件   webpack.config.js，如下：

const path = require('path');

// 這個配置文件，起始就是一個 JS 文件，通過 Node 中的模塊操作，向外暴露了一個 配置對象
module.exports = {
  // 在配置文件中，需要手動指定 入口 和 出口   在任何模塊文件內部，可以使用__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑。
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪個文件
  output: { // 輸出文件相關的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪個目錄中去
    filename: 'bundle.js' // 這是指定 輸出的文件的名稱
  },
};

下面再來執行webpack打包看看，如下：

 

 

 發現打包成功了，然后我們把打包的文件將main.js替換掉后，效果就出來了

 

 

 

 

那么當我們執行webpack命令之后，到底執行了什么步驟呢？

當我們在 控制台，直接輸入 webpack 命令執行的時候，webpack 做了以下幾步：

  1. 首先，webpack 發現，我們並沒有通過命令的形式，給它指定入口和出口
  2. webpack 就會去 項目的 根目錄中，查找一個叫做 webpack.config.js 的配置文件
  3. 當找到配置文件后，webpack 會去解析執行這個 配置文件，當解析執行完配置文件后，就得到了 配置文件中，導出的配置對象
  4. 當 webpack 拿到 配置對象后，就拿到了 配置對象中，指定的 入口 和 出口，然后進行打包構建；

7.webpack-dev-server的基本使用

在日常的開發中，我們可能需要經常修改代碼，然后頻繁去編譯、打包，那么如果每次都要輸入webpack去重新打包，然后再刷新瀏覽器查看，其實是很不方便的。

那么有沒有偷懶的方式，讓代碼變化的時候，自動去打包編譯呢？當然有辦法，可以使用webpack-dev-server工具。

安裝命令：

  • 全局安裝 npm i webpack-dev-server -g
  • 本地安裝 npm i webpack-dev-server -D

 

運行webpack-dev-server命令

 

 

 由於我是本地安裝，所以不能直接使用

 對於本地項目到項目的情況，就需要在package.json的scripts編寫執行命令，如下：

 

 

 下面執行npm run dev命令，如下：

 

 

 打開頁面之后，發現沒有展示index.html頁面

 

 

也就是說我們引入的js文件路徑不對，修改 index.html 引入 bundle.js 的路徑，並且刪除dist目錄下的bundle.js 文件

 

 

 訪問http://localhost:8080/src/

總結一下：

使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能

  1. 由於每次重新修改代碼之后，都需要手動運行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現代碼實時打包編譯，當修改代碼之后，會自動進行打包構建。
  2. 運行cnpm i webpack-dev-server -D 安裝到項目本地開發依賴
  3. 此時需要借助於package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下並沒有生成bundle.js文件，這是因為webpack-dev-server將打包好的文件放在了內存中。 在package.json文件中編寫scripts，如下： "scripts": { "dev": "webpack-dev-server" },
  4. 注意： webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中，必須安裝 webpack 以及 webpack-cli # 安裝 webpack webpack-cli npm i webpack wabpack-cli -D
  5. 把bundle.js放在內存中的好處是：由於需要實時打包編譯，所以放在內存中速度會非常快
  6. 這個時候訪問webpack-dev-server啟動的http://localhost:8080/網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件，需要修改index.html中script的src屬性為:<script src="/bundle.js"></script>
  7. 為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：
"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

 

8 webpack-dev-server的常用命令參數

在上面已經安裝好了webpack-dev-server，已經能夠初步使用了。那么現在可以往下了解幾個讓程序員繼續偷懶的參數。

在啟動運行webpack-dev-server服務，如果希望自動打開瀏覽器，那么則可以設置參數--open，如下：

 

 

 webpack-dev-server啟動服務的默認端口號是8080，如果端口被占用的情況下，則必須要修改啟動端口號。那么修改端口號的參數則是--port 端口號。

 

 

 為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：

 

 

 運行 npm  run dev

 

 

 

 

 

 

還有一種方式也能配置就是直接在webpack.config中配置

 

 

const path = require('path');
const webpack = require('webpack');

// 這個配置文件，起始就是一個 JS 文件，通過 Node 中的模塊操作，向外暴露了一個 配置對象
module.exports = {
  ...
  devServer: { // 這是配置 dev-server 命令參數的第二種形式，相對來說，這種方式麻煩一些
    //  --open --port 3000 --contentBase src --hot
    open: true, // 自動打開瀏覽器
    port: 3000, // 設置啟動時候的運行端口
    contentBase: 'src', // 指定托管的根目錄
    hot: true // 啟用熱更新
  },
  plugins: [ // 配置插件的節點
    new webpack.HotModuleReplacementPlugin(), // new 一個熱更新的 模塊對象， 這是 啟用熱更新的第 3 步
  ],
}; 
 
        
9.配置以打補丁生成壓縮文件的熱更新模式 --hot
 
        
每當我修改一下代碼，則會立即全新生一個bundle.js，其實這樣的話，如果文件比較大時，就會比較耗時；
 
        
那么添加hot熱更新參數，則可以以打補丁的方式來更新
 
        
 
        
 
 
        
 
 
        
 
 
        
10.使用html-webpack-plugin插件配置啟動頁面
 
        
前面在配置生成bundle.js的使用時候，已經將其存儲在內存中編譯生成。那么能不能將index.html頁面也加載存儲到內存中呢？
 
        
這個當然可以，可以使用html-wabpack-plugin插件來完成這部分工作。
 
        
　　首先要安裝插件
 
        
 
         
cnpm i html-webpack-plugin -D
 
        
 
        
　　
 
        
    在webpack.config.js配置文件中配置
 
        
 
         
const htmlWebpackPlugin = require('html-webpack-plugin');
 
         
....
....

plugins: [ // 配置插件的節點
    new htmlWebpackPlugin({ // 創建一個 在內存中 生成 HTML  頁面的插件
      template: path.join(__dirname, './src/index.html'), // 指定 模板頁面，將來會根據指定的頁面路徑，去生成內存中的 頁面
      filename: 'index.html' // 指定生成的頁面的名稱
    })
  ],
 
        
 
        
此時，npm run dev   我們在index.html中將script標簽刪除，同樣能看到同樣的效果了;
 
        
這個插件的兩個作用：
 
        
     
         
  1. 自動在內存中根據指定頁面生成一個內存的頁面
    2.  
         
  2. 自動，把打包好的 bundle.js 追加到頁面中去
    3.  
        
 
        
11.使用webpack打包css文件
 
        
在css文件夾中創建一個index.css文件，將li的小圓圈去掉
 
        
代碼就省略了；將css直接引入到index.html中，是可以的
 
        
但是如果像這樣直接在index.html引入樣式文件的話，那么則會造成二次請求，最好將css的引入操作也寫到main.js中，一起打包為bundle.js單一文件
 
        
 
        
 
 
        
 
 
        
 
 
        
在main.js中使用import命令引入css文件。那么是否這樣就可以了呢？
 
        
當然不行，因為webpack 默認只能打包處理 JS 類型的文件，無法處理 其它的非 JS 類型的文件；如果要處理 非JS類型的文件，我們需要手動安裝一些 合適 第三方 loader 加載器；
 
        
 
        
 
 
        
 
 
        
 
 
        
安裝style-loader css-loader工具，用於處理css文件
 
        
cnpm i style-loader css-loader -D

 
        
剛剛在上面安裝好了兩個插件style-loader css-loader，但是webpack並不會自動去使用的。需要我們手寫正則匹配出css文件，然后再去定義使用什么插件來處理。
 
        
在webpack.config.js文件編寫規則如下：
 
        
 
         
module: { // 這個節點，用於配置 所有 第三方模塊 加載器
    rules: [ // 所有第三方模塊的 匹配規則
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置處理 .css 文件的第三方loader 規則
    ]
  }
 
        
 
        
重新 npm  run dev  發現樣式就生效了
 
        
12.使用webpack打包less文件
 
        
 上面已經實現了css文件的打包合並，那么less文件呢？其實具體的方法就是如下：
 
        
     
         
  1. 執行插件安裝命令：cnpm i less-loader less -D
    2.  
         
  2. 修改webpack.config.js這個配置文件：
    3.  
        
 
        
 
         
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
 
        
 
        
 
        
 
 
        
 
 
        
 建立一個index.less文件，並且引入到main.js中
 
        
 
        
 
 
        
 
 
        
 
 
        
 
 
        
 
 
        
 運行npm run dev；就可以發現less文件也成功編譯了
 
        
12.使用webpack打包sass文件
 
        
學會了less打包編譯，那么sass其實是一樣的
 
        
     
         
  1. 運行cnpm i sass-loader node-sass --save-dev
    2.  
         
  2. 在webpack.config.js中添加處理sass文件的loader模塊：
    3.  
        
 
        
 
         
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
 
        
 
        
具體代碼就不再貼圖了
 
        
12.webpack中 url-loader 的使用
 
        
在上面的章節中，已經可以使用webpack打包 js、css、less、scss 等文件了，但是還有一些問題。例如，如果在css文件中使用圖片、字體等文件，將會有相關的路徑問題。
 
        
這個時候就要使用url-loader來處理這些問題了。
 
        
     
         
  1. 運行cnpm i url-loader file-loader --save-dev
    2.  
         
  2. 在webpack.config.js中添加處理url路徑的loader模塊：
    3.  
        
 
        
 
         
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
 
        
 
        
       可以通過limit指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片才會進行base64編碼：
 
        
 
         
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=2000' },
 
        
 
        
 
 
        
如果不安裝url-loader，直接引用圖片，會發生如下錯誤
 
        
 
 
        
 
 
        
 
 
        
 
 
        
 安裝完成后，就能看到圖片了
 
        
 
        
 
 
        
 
 
        
 
 
        

 
        
 
 
        
limit參數說明：根據圖片大小配置自動轉碼為 base64 格式
 
        
從上面看到，當我們將圖片使用url-loader來處理，將會自動將圖片轉為 base64圖片，那么則會讓圖片跟着 css 文件一起請求過來，不會發起二次請求來下載圖片。
 
        
但是，這里有些地方需要注意一下，如果圖片的大小特別大，那么如果還要轉為 base64 格式的話，則會得不償失。這時候還是使用 url 地址進行二次請求比較好。
 
        
那么如何來區分哪些圖片可以轉為 base64，哪些圖片不要轉為 base64呢？這時候可以使用圖片的文件大小來進行區分，而區分的方法就是給url-loader傳入limit參數。
 
        
可以通過limit指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片才會進行base64編碼：

 
        
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=2000' },
這句話得意思就是小於2000B的圖片會進行編碼，否則不會進行編碼
重新npm run dev  測試一下
 
        
 
        
 
 
        
 
 
        
 
 
        
 
 
        
發現確實是的
 
        
13.webpack 跨域
 
        
 
         
devServer:{
      proxy:{
          "/api":{
              target:"https://mapi.eyee.com",  //目標服務器地址
              changeOrigin:true,  //是否修改來源, 為true時讓目標服務器以為是webpack-dev-server發出的請求
              pathRewrite:{  // 將/api開頭的請求地址, /api 改為 ""
                  "^/api":""
              }
          }
     }
}
 
        
 
        
 
 
        
最后，附上這個練習項目的 webpack.config.js及pageage.json這兩個文件
 
        
 
        
 
 
        
 
 
        
 
 
        
 
 
        
 
 
        
webpack基本配置大概也就這么多
 
        
總體而言，五個屬性：
 
        
1 entry 配置項目入口文件
 
        
2.output 配置出口文件
 
        
3.devServer  配置 dev-server 命令參數及跨域
 
        
4.plugins 配置插件的節點
 
        
5.module 用於配置所有第三方模塊加載器 webpack默認只能打包處理JS類型的文件，無法處理其它的非JS類型的文件；如果要處理 非JS類型的文件，我們需要手動安裝一些合適第三方loader加載器
 
        


 
        

















 
        
 
 
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        webpack之常用plugin的配置和使用  
        webpack之常用loader的配置和使用  
        webpack配置文件的分離 和webpack-merge的使用  
        webpack-dev-server配置指南（使用webpack3.0）  
        webpack css_module配置與使用  
        使用 webpack 4 配置 Vue.js 項目  
        webpack實踐（五）- babel的基礎配置和使用  
        webpack配置  
        webpack配置  
        webpack 配置  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM