npm 初始化目錄:輸入命令npm init
②安裝webpack --save-dev
③建立文件夾 src 放代碼源文件 dist目錄打包項目靜態(tài)資源 建立index.html
④在index.html中引入打包后的js文件烤镐,建立style文件 放css
⑤新建文件名為webpack.config.js的文件袁铐,該文件為webpack的默認(rèn)配置文件挂捅,運行時會自動查找
語法:module.exports = {// configuration};
例衰琐,基本配置:
module.exports={
entry:{
app:'./src/app.js'
},//入口文件
output:{
path:__dirname + '/build',
filename:'js/[name].js'
}//出口文件
}
========package.json文件==========
npm的屬性script
在屬性里面定義一個腳本的內(nèi)容
可以是真是的webpack命令躯喇,這里自定義一個webpack腳本
"scripts":{
"test":"echo\"Error: no test specified\"&& exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
},
其中--progress命令參數(shù)顯示進(jìn)度 在webpack處理css文件以及一些高級命令行參數(shù)已說明
運行npm run webpack即可運行
==========================
webpack配置文件的 入口參數(shù)
entry,可以寫成
entry:[ "./entry1","./entry2"]兩個不相依賴的入口文件
也可以寫成對象形式
entry:{
main:'./main',
a:'./a'
}
由于有兩個入口坊夫,output就不能做相對路徑要改成:
output:{
path:'./dist/js',
filename:'[name]-[chunkhash].js' ?//chunkhash為文件的md5值具有唯一性搬葬,只有在有修改時才會改變碌秸。
}
相關(guān)可以查看官方文檔:http://webpack.github.io/docs/configuration.html