Webpack安裝配置及打包詳細過程

Eden李秉秉秉秉發表於2020-11-10

引言

前端經過漫長的發展,湧現出了很多實踐方法來處理複雜的工作流程,讓開發變得更加簡便,其中,模組化可以使複雜的程式細化成為各個小的檔案,而webpack並不強制你使用某種模組化方案,而是通過相容所有模組化方案讓你無痛接入專案,本文詳細介紹webpack安裝配置及打包的詳細過程。

Webpack簡單介紹

本質上,webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時,它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle

其中包含四個核心概念

  • 入口(entry):指示 webpack 應該使用哪個模組,來作為構建其內部依賴圖的開始。進入入口起點後,webpack 會找出有哪些模組和庫是入口起點(直接和間接)依賴的
  • 輸出(output):告訴 webpack 在哪裡輸出它所建立的 bundles,以及如何命名這些檔案,預設值為 ./dist
  • loader:讓 webpack 能夠去處理那些非 JavaScript 檔案(webpack 自身只理解 JavaScript)
  • 外掛(plugins):外掛則可以用於執行範圍更廣的任務。外掛的範圍包括,從打包優化和壓縮,一直到重新定義環境中的變數。外掛介面功能極其強大,可以用來處理各種各樣的任務。

通過官網的一張圖,可以說明webpack的強大,如下所示:

1

打包步驟

接下來詳細介紹webpack安裝配置及打包的詳細過程

安裝node.js

可以參考百度,這裡不再重複書寫。

全域性安裝webpack

執行CMD,安裝命令如下所示,其中, -g是全域性安裝,並移除安裝了 webpack和webpack-cli

npm install webpack webpack-cli –g

建立本地專案資料夾

建立專案本地資料夾,如“D:\TestWebpack”,在CMD命令窗中分別輸入如下命令,切換到該目錄

D:                 //切換到D盤
cd D:\TestWebpack //切換到專案目錄

本地安裝webpack

輸入如下命令,在專案目錄中安裝webpack,其中,--save-dev是本地安裝

npm install webpack webpack-cli --save-dev

檢視webpack 版本

輸入如下命令,若出現版本號,說明安裝成功。

webpack -v

建立package.json檔案

輸入如下命令,將在專案目錄中自動生成package.json檔案

npm init -y

配置打包目錄

在專案目錄下,新建config資料夾,用於存放配置檔案;src資料夾,用於存放原始碼;out資料夾,用於存放打包生成檔案,具體如下圖所示。

1

新增webpack.config.js檔案

在config資料夾中新增webpack.config.js檔案,並新增如下程式碼:

const path=require('path'); //呼叫node.js中的路徑
module.exports={
    entry:{
        index:'./src/js/index.js' //需要打包的檔案
    },
    output:{
        filename:'[name].js',    //輸入的檔名是什麼,生成的檔名也是什麼
        path:path.resolve(__dirname,'../out') //指定生成的檔案目錄
    },
    mode:"development"    //開發模式,沒有對js等檔案壓縮,預設生成的是壓縮檔案
}

執行webpack

在cmd命令窗體中,輸入如下命令,執行成功後,在out目錄中會生成打包後的index.js

webpack --config config/webpack.config.js

配置package.json

每次輸入命令webpack --config config/webpack.config.js,太長,且非常不方便,此時我們可以在package.json檔案中配置,如下所示:

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  }
}

配置完成後,我們輸入的如下命令,可以直接打包。

npm run start

JS快取問題的處理

通過雜湊值解決JS快取問題(在沒有修改JS要打包的內容時,不會重新打包一個JS檔案),修改webpack.config.js檔案,具體程式碼如下:

const path=require('path');
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',//增加8位的雜湊值
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
}

安裝webpack外掛clean-webpack-plugin

通過clean-webpack-plugin外掛刪除輸出目中之前舊的檔案。

安裝命令
npm install --save-dev clean-webpack-plugin
用法一
const path=require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
    plugins:[
        new CleanWebpackPlugin()        
    ]
}
用法二
const path=require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin ;
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
    plugins:[
        new CleanWebpackPlugin()        
    ]
}

配置完後,我們再次執行npm run start,此時out目錄中,只有一個新生成的js檔案,如下圖所示。

1

總結

至此,我們完成從webpack安裝、配置、打包等一系列步驟。以上詳細步驟,全部經過筆者測試通過,如果在安裝或使用過程中出現問題,歡迎留言交流,如果本文對你有所幫助,希望關注支援下。

相關文章