webpack的安裝與基本配置

入門介紹

---

• 自動化構建工具：
  • gulp
  • webpack
• web開發存在的困境
  • 文件依賴關係錯綜複雜
  • 靜態資源請求效率低
  • 模塊化支持不友好
  • 瀏覽器對高級JavaScript特性兼容程度低
• 什麼是webpack？
  • 概述
    • webpack是一個流行的前端項目構建工具(打包工具),提供了友好的模塊化支持，以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能。
    • 目前絕大多數企業中的前端項目，都是基於webpack進行打包構建的
    • 構建圖分析
      • 立方體代表webpack的logo
      • 箭頭代表打包的過程
      • 左側表示沒有經過webpack打包前構建之前的項目狀態
      • 右側代表經過打包構建之後的項目狀態

基本使用

---

1. 列表隔行變色項目
   • 新建項目空白目錄，並運行npm init -y，初始化包管理配置化文件package.json
   • 新建src源代碼目錄
   • 在src --> index.html 首頁
   • 初始化首頁基本的結構
   • 運行npm install jquery -s命令,安裝jQuery
   • 通過模塊化的形式，實現列表隔行變色
2. 在項目中安裝和配置webpack
   • 運行npm install webpack webpack-cli -D，安裝webpack相關的包
   • 在項目根目錄中，創建名爲webpack.config.js 的webpack配置文件
   • 在webpack的配置文件中，初始化如下基本配置：

         module.exports = {
             mode:'development' //production 爲上線模式 指定構建模式 此爲開發模式
         }
     

   • 在pack.json 配置文件中的script節點下，新增dev腳本

         "script": {
             "dev":"webpack" //script 節點下的腳本，可以通過`npm run`執行
         }
     

   • 在終端中運行npm run dev命令，啓動webpack進行項目打包
   • webpack配置文件中兩種模式的不同點在於production對index.js進行了壓縮
3. 配置打包的入口與出口
   • webpack的4.x版本中默認約定：
     • 入口文件：src --> index.js
     • 出口文件：dist --> main.js
     • 如果要修改打包的入口與出口，可以在weback.config.js中新增如下配置

           const path = require('path')  // 導入node.js中專門操作路徑的模塊
           module.exports = {
               entry: path.join(__dirname, './src/index.js'), //打包入口文件的路徑
               output: {
                   path: path.join(__dirname, './dist'), // 輸入文件的存放路徑
                   filename: 'bundle.js' // 輸出文件的名稱
               }
           }
       

4. 配置自動打包功能
   • 每次修改完代碼，都需要看到最新的效果，每次都需要執行打包命令npm run dev
   • 實現：
     • 運行npm i webpack-dev-server -D 安裝支持自動化打包的工具
     • 修改package.json --> script中的dev命令如下:

           "script": {
               "dev": 'webpack-dev-server' // script 節點下的腳本，可以通過npm run 執行
           }
       

     • 將 src --> index.html中,script腳本的引用路徑，修改爲"/bundle.js"
     • 運行npm run dev 命令，重新進行打包
     • 在瀏覽器中訪問http://localhost:8080/，查看自動打包效果
   • webpack-dev-server會啓動一個實時打包的 http 服務器，實時監聽代碼變化，進行實時編譯，從而頁面呈現。
   • webpack-dev-server打包生成的輸出文件，默認放到項目根目錄中，而且是虛擬的、看不見的
5. 配置html-webpack-plugin生成預覽頁面
   • 運行 npm install html-webpack-plugin -D命令，安裝生成預覽頁面的插件
   • 修改 webpack.config.js 文件頭部區域，添加如下配置信息：

         // 導入生成預覽頁面的插件，得到一個構造函數
         const HtmlWebpackPlugin = require('html-webpack-pluguin')
         const htmlplugin = new HtmlWebpackPlugin({
             template: './src/index.html', // 指定要用到的模板文件
             filename: 'index.html' //指定生成的文件的名稱，該文件存在於內存中在目錄中不顯示
         })
         
     

   • 修改 webpack.config.js文件中向外暴露的配置對象，新增如下配置節點：

         module.exports = {
             plugins: [ htmlPlugin ]  // plugins數組是webpack打包期間會用到的一些插件列表
         }
     

6. 配置自動打包的相關參數
   • 配置 package.json

         "scripts": {
             "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080" 
         }