淺談webpack特點及其使用（個人備忘錄）

Achilles 發布于2019-08-21 17:54 / 420人閱讀

摘要：的特點模塊化會把一切視為模塊，而模塊化的文件會十分靈活，且容易調試以及升級，會讓人有種工程化的意識。的安裝形式安裝也可以直接安裝到項目的依賴里配置入口文件模塊打包的起點稱之為入口文件。是你第一個啟動的文件。

好多人在剛開始學習了webpack之后，可能對于webpack是什么？怎么用多少會有些迷茫，下面是我的學習心得，希望能幫助到大家，有不足之處，也歡迎提出共同來討論。

webpack的特點

模塊化

webpack會把一切視為模塊，而模塊化的文件會十分靈活，且容易調試以及升級，webpack會讓人有種工程化的意識。

壓縮和打包

有人會說webpack就是為js打包而生的，其他的功能也是后來才加上去的，所以webpack更注重打包，也就是說文件打包功能更加強大。此外，現在的webpack不僅能給js文件打包，css文件等等都可以，至于如何實現我們后面會提到。它還可以預編譯文件等等。

webpack的安裝

npm 形式安裝

$npm install webpack -g

也可以直接安裝到項目的依賴里

npm init
npm install webpack -save-dev

配置webpack.config.js what is entry point (入口文件)

模塊打包的起點稱之為入口文件。入口文件會告訴webpack從哪里開始打包和遵循著什么依賴關系進行打包。是你app第一個啟動的文件。

實例

建立index.html

建立main.js

建立webpack.config.js文件

安裝live-server并預覽程序

index.html

main.js

module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js"
    }
};

安裝live-server，
npm install live-server -g

感受一下吧。

當然這里是基本的東西。

GPU云服務器云服務器 cdn加速的特點及其優勢 webpack使用 webpack 使用公用cdn 免費域名空間及其使用方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90192.html

個人整理, 閱讀過的好文章 (每天隨時更新)

摘要：大家有好的文章可以在評論下面分享出來共同進步本文鏈接數組使用之道程序員進階學習書籍參考指南教你在不使用框架的情況下也能寫出現代化代碼巧用數組函數框架中間件實現沒錯，這就是面向對象編程設計模式需要遵循的個基本原則令人困惑的在中使用協程實現多任大家有好的文章,可以在評論下面分享出來, 共同進步! 本文github鏈接 php PHP 數組使用之道 PHP程序員進階學習書籍參考指南教你...

Chiclaim 2019-07-01 12:31 評論0 收藏0
后臺開發常問面試題集錦（問題搬運工，附鏈接）

摘要：基礎問題的的性能及原理之區別詳解備忘筆記深入理解流水線抽象關鍵字修飾符知識點總結必看篇中的關鍵字解析回調機制解讀抽象類與三大特征時間和時間戳的相互轉換為什么要使用內部類對象鎖和類鎖的區別，，優缺點及比較提高篇八詳解內部類單例模式和 Java基礎問題 String的+的性能及原理 java之yield(),sleep(),wait()區別詳解-備忘筆記深入理解Java Stream流水...

spacewander 2019-08-21 17:42 評論0 收藏0
后臺開發常問面試題集錦（問題搬運工，附鏈接）

摘要：基礎問題的的性能及原理之區別詳解備忘筆記深入理解流水線抽象關鍵字修飾符知識點總結必看篇中的關鍵字解析回調機制解讀抽象類與三大特征時間和時間戳的相互轉換為什么要使用內部類對象鎖和類鎖的區別，，優缺點及比較提高篇八詳解內部類單例模式和 Java基礎問題 String的+的性能及原理 java之yield(),sleep(),wait()區別詳解-備忘筆記深入理解Java Stream流水...

xfee 2019-08-15 12:33 評論0 收藏0
后臺開發常問面試題集錦（問題搬運工，附鏈接）

摘要：基礎問題的的性能及原理之區別詳解備忘筆記深入理解流水線抽象關鍵字修飾符知識點總結必看篇中的關鍵字解析回調機制解讀抽象類與三大特征時間和時間戳的相互轉換為什么要使用內部類對象鎖和類鎖的區別，，優缺點及比較提高篇八詳解內部類單例模式和 Java基礎問題 String的+的性能及原理 java之yield(),sleep(),wait()區別詳解-備忘筆記深入理解Java Stream流水...

makeFoxPlay 2019-07-31 11:00 評論0 收藏0