Webpack基本用法總結(jié)(個(gè)人見解)
一倒槐、什么是Webpack
1.Webpack是進(jìn)行模塊化開發(fā)的工具惕艳,可以把復(fù)雜的程序細(xì)化為小的文件锈至,大大提高開發(fā)效率晨缴。
2.Scss、Less等css語言預(yù)處理峡捡。
3.壓縮代碼击碗,使項(xiàng)目變輕。
4.有按需加載代碼等工具棋返。
5.熱加載延都,增加調(diào)試效率雷猪。
二睛竣、安裝和使用
npm install -g webpack
npm install --save-dev webpack
npm init
npm i // 安裝依賴
三、配置Webpack
Webpack的配置文件是Webpack.config. js
如果配置不同環(huán)境下的webpack就要新建不同的配置文件
如dev環(huán)境下就是Webpack.dev.config.js求摇、test環(huán)境下就是Webpack.test.config.js
然后把文件暴露出來射沟,在package.json文件中的scripts下配置啟動(dòng)時(shí)要走的配置文件(具體還沒有操作過- - )
內(nèi)配置容
基本配置
項(xiàng)目入口: entry:{}
項(xiàng)目出口: output:{}
加載器: loaders:{}css-loader style-loader file-loader scss/less-loader 等各種loader按需要配置
插件: plugins:[] 插件(Plugins)是用來拓展Webpack功能的殊者,它們會(huì)在整個(gè)構(gòu)建過程中生效,執(zhí)行相關(guān)的任務(wù)验夯。如按需加在壓縮代碼等猖吴。
構(gòu)建本地服務(wù)器:devServer:{}port配置本地服務(wù)器端口(默認(rèn)8080)inline代碼改動(dòng)自動(dòng)刷新頁面
配置Bable轉(zhuǎn)碼 Es6、Es7轉(zhuǎn)成Es5
具體配置見官網(wǎng)~~~或者這里https://segmentfault.com/a/1190000006178770