學習Webpack

時間 2020-06-08

標籤學習 webpack 简体版

原文原文鏈接

什麼是WebPack，爲何要使用它？

爲什要使用WebPack

現今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法css

模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；
Scss，less等CSS預處理器
...

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲WebPack類的工具的出現提供了需求。html

什麼是Webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。前端

Grunt和Gulp的工做流程

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。webpack

Webpack工做方式

若是實在要把兩者進行比較，Webpack的處理速度更快更直接，能打包更多不一樣類型的文件。web

開始使用Webpack

初步瞭解了Webpack工做方式後，咱們一步步的開始學習使用Webpack。npm

安裝

Webpack可使用npm安裝，新建一個空的練習文件夾（此處命名爲webpack sample project），在終端中轉到該文件夾後執行下述指令就能夠完成安裝。json

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack
複製代碼

正式使用Webpack前的準備

在上述練習文件夾中建立一個package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令能夠自動建立這個package.json文件

npm init
複製代碼

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可。瀏覽器

package.json文件已經就緒，咱們在本項目中安裝Webpack做爲依賴包

// 安裝Webpack
npm install --save-dev webpack
複製代碼

回到以前的空文件夾，並在裏面建立兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的JavaScript模塊，public文件夾用來存放以後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來咱們再建立三個文件:

index.html --放在public文件夾中;
Greeter.js-- 放在app文件夾中;
main.js-- 放在app文件夾中;

此時項目結構以下圖所示bash

項目結構

咱們在index.html文件中寫入最基礎的html代碼，它在這裏目的在於引入打包後的js文件（這裏咱們先把以後打包後的js文件命名爲bundle.js，以後咱們還會詳細講述）。app

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
複製代碼

咱們在Greeter.js中定義一個返回包含問候信息的html元素的函數,並依據CommonJS規範導出這個函數爲一個模塊：

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
複製代碼

main.js文件中咱們寫入下述代碼，用以把Greeter模塊返回的節點插入頁面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。