前端經過漫長的發展，涌現出了很多實踐方法來處理複雜的工作流程，讓開發變得更加簡便，其中，模塊化可以使複雜的程式細化成為各個小的文件，而webpack並不強制你使用某種模塊化方案，而是通過相容所有模塊化方案讓你無痛接入項目，本文詳細介紹webpack安裝配置及打包的詳細過程。 ...
引言
前端經過漫長的發展，涌現出了很多實踐方法來處理複雜的工作流程，讓開發變得更加簡便，其中，模塊化可以使複雜的程式細化成為各個小的文件，而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的強大，如下所示：
打包步驟
接下來詳細介紹webpack安裝配置及打包的詳細過程
安裝node.js
可以參考上篇博客Node.js安裝詳細步驟教程(Windows),這裡不再重覆書寫。
全局安裝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文件夾，用於存放打包生成文件，具體如下圖所示。
添加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文件，如下圖所示。
總結
至此，我們完成從webpack安裝、配置、打包等一系列步驟。以上詳細步驟，全部經過筆者測試通過，如果在安裝或使用過程中出現問題，歡迎留言交流，如果本文對你有所幫助，希望關註支持下。
