一、環(huán)境搭建
開發(fā)工具：VS Code（自行下載）
安裝Node：http://nodejs.cn/
安裝webpack
全局安裝
npm install webpack webpack-cli webpack-dev-server -g
注意：從webpack4開始，webpack-cli需要獨(dú)立安裝。
二、項(xiàng)目實(shí)戰(zhàn)
1、建立一個空文件夾，比如叫webpack_demo
執(zhí)行命令
npm init -y
image.png
得到package.json
2、安裝webpack
npm i webpack -s -d
npm install webpack-cli
image.png
3、建立目錄結(jié)構(gòu)
創(chuàng)建文件夾 dist src
mkdir dist src
image.png
為了方便測試，建立entrey.js index.html bundle.js等文件
image.png
image.png
4、打包命令
webpack src/entery.js -o dist/bundle.js --mode development
image.png
image.png
5.訪問index.html頁面效果如下
image.png
注意
由于webpack4版本升級，導(dǎo)致之前的命令
webpack src/entery.js dist/bundle.js
無法正常使用
請使用
webpack src/entery.js -o dist/bundle.js --mode development
源碼：https://gitee.com/andli/webpack_demo.git
參考文檔
https://www.cnblogs.com/ldq678/p/10295870.html
