webpack

哈了个皮發表於2024-05-02
Web

vue是基於es6的開發的

let是區域性變數

什麼是Webpack

本質上，webpack是一個現代JavaScript應用程式的靜態模組打包器(module bundler)。當webpack處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個bundle.
 Webpack是當下最熱門的前端資源模組化管理和打包工具，它可以將許多鬆散耦合的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分離，等到實際需要時再非同步載入。透過loader轉換，任何形式的資源都可以當做模組，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
 伴隨著移動網際網路的大潮，當今越來越多的網站已經從網頁模式進化到了WebApp模式。它們執行在現代瀏覽器裡，使用HTML5、CSS3、ES6 等新的技術來開發豐富的功能，網頁已經不僅僅是完成瀏覽器的基本需求; WebApp通常是一個SPA (單頁面應用) ，每一個檢視透過非同步的方式載入，這導致頁面初始化和使用過程中會載入越來越多的JS程式碼，這給前端的開發流程和資源組織帶來了巨大挑戰。
 前端開發和其他開發工作的主要區別，首先是前端基於多語言、多層次的編碼和組織工作，其次前端產品的交付是基於瀏覽器的，這些資源是透過增量載入的方式執行到瀏覽器端，如何在開發環境組織好這些碎片化的程式碼和資源，並且保證他們在瀏覽器端快速、優雅的載入和更新，就需要一個模組化系統，這個理想中的模組化系統是前端工程師多年來一直探索的難題。

2. 使用Webpack

  1. 先建立一個包 交由idea開啟 會生成一個.idea檔案 那麼就說明該檔案就交由idea負責

  2. 在idea中建立modules包，再建立hello.js,hello.js 暴露介面 相當於Java中的類

//暴露一個方法

exports.sayHi = function () {
    document.write("<h1>狂神說ES6</h1>>")
}
  1. 建立main.js 當作是js主入口 , main.js 請求hello.js 呼叫sayHi()方法
var hello = require("./hello");
hello.sayHi()
  1. 在主目錄建立webpack-config.js , webpack-config.js 這個相當於webpack的配置檔案

enrty請求main.js的檔案

output是輸出的位置和名字



module.exports = {
    entry: './modules/main.js',
    output: {
        filename: './js/bundle.js'
    }
}

在idea命令臺輸入webpack命令（idea要設定管理員啟動）

  1. 完成上述操作之後會在主目錄生成一個dist檔案 生成的js資料夾路徑為/ dist/js/bundle.js

在主目錄建立index.html 匯入bundle.js
index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>

相關文章