本章爲大家分享webpack4.0後的安裝教程，自己剛接觸時，網上大部分都是以前的安裝教程，在過程真遇到些坑，爲了大家不必浪費更多的時間，這裏將爲大家詳細介紹
webpack是什麼，它是一個根據模塊依賴關係進行靜態分析的工具，簡單來說就是打包工具，在當前的前端打包工具的使用時是趨勢的發展；下面進入正題
在安裝webpack前，你必須爲本機安裝 node.js ；這個你直接去官網選擇相應的系統直接下載一路下一步安裝好，node下載
例 window系統的
下載安裝好後
打開命令行執行命令
node -v // 查看node的版本
npm -v //查看npm的版本
都正常顯示版本號，那就安轉成功了可以進行webpack的安裝了。一般這個不會出錯，若出錯檢查下你安裝的路徑位置，實在不行重新安裝吧，
沒問題就進入webpack的安裝，webpack的安裝有全局安裝與 僅該項目安裝，官方不建議全局安裝，網上的教程基本是全局安裝，即使你全局安裝了，你依舊需要再次爲項目安裝。全局安裝可能會造成項目中的指向的是全局安裝的webpack;
由於webpack4後的版本，命令遷移至webpack-cli，因此還需安裝webpack-cli
全局安裝:
打開命令行（win+R 輸入cmd）
在命令行執行 npm install webpack webpack-cli -g --save-dev
-g -----全局安裝
--save-dev ----- 信息寫入package.json的devDependencies中
然後等待時間，下載快慢取決於你的網速
下載好後在命令行執行 webpack -v 查看webpack的版本號，正常顯示說明安裝好了
爲項目安裝，找到你該項目的路徑位置。在你項目的位置打開命令行；快捷方式 按住 shfit + 鼠標右鍵 在窗口選擇在此處打開命令行，如果你安轉了 git 的話 也可打開 Git-Bash here
在命令行執行 同樣的只是去除了 -g 這個全局安裝
npm install webpack webpack-cli --save-dev
安裝後你會發現你項目下多了node_moudle文件 package_lock.json文件；說明你成功安裝好了
再在命令行初始化項目執行命令
npm init
回車後你會發現
不用管一路回車直到
到這裏你回到項目例看會看到 package.json文件 一切沒問題
這裏webpakc的入口默認爲 src 下的index.js，出口默認爲 ./dist
接下來你可以下項目下新建 文件夾 src 其下面並創建index.js;還有文件夾dist； 你也可通過在命令行執行命令
mkdir src 創建文件夾src mkdir dist 創建文件夾 dist，再在src下新建一個index.js文件
例
到這裏在你的index.js寫你的js代碼
例：
index.js
document.write("Hello webpack");
然後在命令行執行 webpack 之後你會發現你的dist文件下多了一個 main.js
然後在你的 html 中 引入 main.js
運行結果
一切完好沒問題，目前都是webpack的默認配置
接下來可以自定義webpack的配置，在項目的根目錄下創建 webpack.config.js 文件
webpack.config.js
const path = require('path');
module.exports = {
//入口文件
entry: './src/index.js',
//出口哦
output: {
//輸出的文件名
filename: 'bundle.js',
//輸出的路徑
path: path.resolve(__dirname, 'dist')
},
mode: 'development'
};
__dirname ----- 運行時的當前路徑
mode ---- 模式prodution（生產模式）與 development （開發）webpack4後需指明
package.json
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"lodash": "^4.17.10",
"style-loader": "^0.21.0",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0"
}
}
加入了 "private": true ---- 設置私有
"build": "webpack " ---- 配置執行命令
有該配置在命令行執行刷新配置
npx webpack--config webpack.config.js
後執行
npm run build
打包 你會發現dist下面多了個 bundle.js文件 在html中引入bundle.js正常顯示 Hello webpack
完成了
webpack自身只能理解js，並打包，如需進行 css 或者圖片 xml 等還需下載相應的loder
例：打包css 需安裝 style-loader css-loader
在html中引用的是 dist 下的 bundle.js ，這是前端開發的一個趨勢：開發的源文件（例子中src/index.js）與 最終部署文件（例子的dist/bundle.js）是區分開的，因爲開發環境與用戶環境不一致。比如我們在開發中使用了ES6的新特性，在用戶端不一定支持，這也是webpack等打包工具的意義， 它能夠輔助我們構建出在目標用戶瀏覽器上正常運行的代碼
webpack的起步講到這，需瞭解詳情也可去看官方文檔webpack中文網
希望對剛接觸webpack的朋友有所幫助；有不對的地方問題可指出