webpack自動打包功能實現(xiàn)
一、了解webpack
當前web開發(fā)面臨的困境
1.文件依賴關系錯綜復雜
2.靜態(tài)資源請求效率低
3.模塊化支持不友好
4.瀏覽器對高級javascript特性兼容程度較低
webpack是前端項目構建工具(打包工具)
提供了有好的模塊化支持,以及代碼壓縮混淆,處理js兼容問題,性能優(yōu)化等強大功能
二、在項目中安裝和配置webpack
1.運行npm install webpack webpack-cli -D命令,安裝webpack相關的包
2.在項目根目錄中,創(chuàng)建名為webpack.config.js 的webpack配置文件‘
3.在webpack的配置文件中,初始化如下配置:
module.exports = { mode:'development' //mode用來指定構建模式 }
4.在package.json配置文件中的scripts節(jié)點下,新增dev腳本如下:
"script":{ "dev":"webpack" //script節(jié)點下的腳本,可以通過npm run執(zhí)行 }
5.在終端中運行npm run dev命令,啟動webpack進行項目打包
三、webpack的打包
1.默認打包的入口文件為src下的index.js,默認打包的輸出文件為dist下的main.js
2.若要修改打包的入口和出口,可以在webpack.config.js中新增如下配置:
const path = require('path') module.exports = { entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, './dist'), // 輸出文件的存放路徑 filename: 'bundle.js' // 輸出文件的名稱 } }
3.運行npm run dev進行打包,會發(fā)現(xiàn)在dist文件中出現(xiàn)bundle.js文件
4.將bundle.js引用到index.html中,運行頁面。
四、webpack的自動打包
1.為什么要進行自動打包?
若修改js中的樣式,例如jquery中的 $(‘li:odd’).css(‘backgroundColor’,‘red’)代碼,會發(fā)現(xiàn)頁面樣式并沒有發(fā)生改變,因為我們在index.html中引入的是bundle.js而不是index.js,所以每次修改代碼都得npm run dev 進行打包,自動打包會更方便,也就是熱更新。
2.配置webpack的自動打包功能
(1)運行npm install webpack-dev-server -D命令,安裝支持項目自動打包的工具
(2)修改package.json -> scripts 中的dev命令如下:
"scripts":{ "dev":"webpack-dev-server" //script節(jié)點下的腳本,可以通過npm run 執(zhí)行 }
(3)將src -> index.html中,scripts腳本的引用路徑,修改為“/bundle.js”,該文件是虛擬的,看不見的。
(4)運行npm run dev命令,重新進行打包
(5)在瀏覽器中訪問http://localhost:8080地址,查看自動打包效果
若出現(xiàn) Cannot find module ‘webpack-cli/bin/config-yargs’
問題,可能是webpack與webpack-dev-server版本不兼容
到此這篇關于webpack自動打包的文章就介紹到這了,更多相關webpack自動打包內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)統(tǒng)計文本框Textarea字數(shù)增強用戶體驗
現(xiàn)在流行的Twitter等微博客網站,有一個很好的用戶體驗,就是在文本框中輸入文字的時候,會自動統(tǒng)計輸入的字符,并顯示用戶還能輸入的字符,在限制了140個字的微博客中,這樣的小提示可以很好的增強用戶體驗,本文也嘗試著實現(xiàn)一下2012-12-12javascript運動效果實例總結(放大縮小、滑動淡入、滾動)
這篇文章主要介紹了javascript運動效果,結合實例形式總結分析JavaScript實現(xiàn)放大縮小、滑動淡入、滾動等效果的方法,需要的朋友可以參考下2016-01-01收集的比較全的automation服務器不能創(chuàng)建對象 異常原因和解決方法
對于出現(xiàn)automation服務器不能創(chuàng)建對象的問題,下面有幾種解決方法大家可以試試。2008-10-10