1.安裝webpack依賴
npm init //初始化善已，創(chuàng)建package.js
npm install --save-dev webpack //在項(xiàng)目中安裝依賴包
npm install -g webpack //全局安裝
2.回到原文件夾，創(chuàng)建兩個(gè)文件夾挂洛，src存放源文件黎比，dist存放打包后的js文件（供瀏覽器讀攘到拧）腺办，創(chuàng)建index.html
項(xiàng)目結(jié)構(gòu).png
src里創(chuàng)建script及style兩個(gè)文件夾，用于存放腳本及樣式糟描。
script里創(chuàng)建main.js(作為文件入口)怀喉。
3.配置文件
回到原文件夾，創(chuàng)建webpack.config.js
module.exports={
entry: __dirname + '/src/script/main.js'船响，//文件入口躬拢，最好使用絕對(duì)路徑
output:{
path: __dirname + '/dist/js', //打包后文件存放的地方
filename:'bundle.js' //打包后的文件名
// filename:'bundle-[hash].js' //亦可添加hash值到打包文件中(避免緩存)
}
}
注：“__dirname”是node.js中的一個(gè)全局變量，指向當(dāng)前腳本所在的目錄见间。
注：若修改默認(rèn)文件名(webpack.config.js)聊闯，則需要在運(yùn)行webpack時(shí)指定配置文件名，即webpack --config 修改后的文件名
4.打包
- 全局安裝——只需在終端輸入webpack
- 非全局安裝——需執(zhí)行命令node_modules/.bin/webpack
查看dist下是否生成bundle.js米诉，以判斷webpack是否生效菱蔬。
webpack運(yùn)行成功.jpg
- 自定義打包命令
在package.json中對(duì)script對(duì)象進(jìn)行相關(guān)設(shè)置：
"scripts": {
"start":"webpack"
}
直接運(yùn)行npm run start
注：start / stop/test 是npm特殊命令，可省略‘run’史侣，直接執(zhí)行npm start / npm stop / npm test即可拴泌。
webpack參數(shù)其他配置
package.json文件
“script”:{
"webpack":"webpack --config webpacke.config.js --progress//打包過(guò)程 --display-module//打包模塊 --colors//打包字彩色 --display-reason//打包原因"
}
多個(gè)入口配置
module.exports={
entry:{
main:__dirname + '/src/script/main.js',
a:__dirname + '/src/script/a.js'
}
output:{
path: __dirname + '/dist/js',
filename:'[name]-[hash].js'
// filename:'[name]-[chunkhash].js' //MD5算法,確保每個(gè)文件的版本號(hào)不同
}
}
//輸出： ./dist/js/main.js , ./dist/js/a.js
