一、了解webpack

當(dāng)前web開(kāi)發(fā)面臨的困境
1.文件依賴(lài)關(guān)系錯(cuò)綜復(fù)雜
2.靜態(tài)資源請(qǐng)求效率低
3.模塊化支持不友好
4.瀏覽器對(duì)高級(jí)javascript特性兼容程度較低

webpack是前端項(xiàng)目構(gòu)建工具（打包工具）
提供了有好的模塊化支持，以及代碼壓縮混淆，處理js兼容問(wèn)題，性能優(yōu)化等強(qiáng)大功能

二、在項(xiàng)目中安裝和配置webpack

1.運(yùn)行npm install webpack webpack-cli -D命令，安裝webpack相關(guān)的包
2.在項(xiàng)目根目錄中，創(chuàng)建名為webpack.config.js 的webpack配置文件‘
3.在webpack的配置文件中，初始化如下配置：

 module.exports = {
      mode:'development'  //mode用來(lái)指定構(gòu)建模式
 }

4.在package.json配置文件中的scripts節(jié)點(diǎn)下，新增dev腳本如下：

  "script":{
       "dev":"webpack"  //script節(jié)點(diǎn)下的腳本，可以通過(guò)npm run執(zhí)行
  }

5.在終端中運(yùn)行npm run dev命令，啟動(dòng)webpack進(jìn)行項(xiàng)目打包

三、webpack的打包

1.默認(rèn)打包的入口文件為src下的index.js，默認(rèn)打包的輸出文件為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' // 輸出文件的名稱(chēng)
    }
}

3.運(yùn)行npm run dev進(jìn)行打包，會(huì)發(fā)現(xiàn)在dist文件中出現(xiàn)bundle.js文件
4.將bundle.js引用到index.html中，運(yùn)行頁(yè)面。

四、webpack的自動(dòng)打包

1.為什么要進(jìn)行自動(dòng)打包？
        若修改js中的樣式，例如jquery中的 $(‘li:odd’).css(‘backgroundColor’,‘red’）代碼，會(huì)發(fā)現(xiàn)頁(yè)面樣式并沒(méi)有發(fā)生改變，因?yàn)槲覀冊(cè)趇ndex.html中引入的是bundle.js而不是index.js,所以每次修改代碼都得npm run dev 進(jìn)行打包，自動(dòng)打包會(huì)更方便，也就是熱更新。
2.配置webpack的自動(dòng)打包功能
（1）運(yùn)行npm install webpack-dev-server -D命令，安裝支持項(xiàng)目自動(dòng)打包的工具
（2）修改package.json -> scripts 中的dev命令如下：

 "scripts":{
      "dev":"webpack-dev-server"   //script節(jié)點(diǎn)下的腳本，可以通過(guò)npm run 執(zhí)行
 }

（3）將src -> index.html中，scripts腳本的引用路徑，修改為“/bundle.js”，該文件是虛擬的，看不見(jiàn)的。
（4）運(yùn)行npm run dev命令，重新進(jìn)行打包
（5）在瀏覽器中訪問(wèn)http://localhost:8080地址，查看自動(dòng)打包效果

若出現(xiàn) Cannot find module ‘webpack-cli/bin/config-yargs’
問(wèn)題，可能是webpack與webpack-dev-server版本不兼容

到此這篇關(guān)于webpack自動(dòng)打包的文章就介紹到這了,更多相關(guān)webpack自動(dòng)打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論