webpack入坑之旅（一）不是開始的開始

時間 2019-11-13

標籤 webpack 之旅不是開始简体版

原文原文鏈接

最近學習框架，選擇了vue，而後接觸到了vue中的單文件組件，官方推薦使用 Webpack + vue-loader構建這些單文件 Vue 組件，因而就開始了webpack的入坑之旅。
由於原來沒有用過任何的構建工具與模塊化工具，因此本系列會十分的基礎。而且可能有不少不正確的地方，但願你們諒解，並指出錯誤幫助改進。謝謝！javascript

這是一系列文章，此係列全部的練習都存在了個人github倉庫中vue-webpack，在本人有了新的理解與認識以後,會對文章有不定時的更正與更新。下面是目前完成的列表：css

什麼是webpack

其實不是特別想寫這個東西，但貌似全部的教程都有這個。隨便寫兩句吧。能夠直接跳過。html

Webpack 是德國開發者 Tobias Koppers 開發的模塊加載器兼打包工具，在webpack中，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。所以, Webpack 當中 js 能夠引用 css, css 中能夠嵌入圖片 dataUrl。
對應各類不一樣文件類型的資源, Webpack 有對應的模塊 loader好比vue用的是vue-loader固然這是後話，在後面咱們再來講。vue

請看下圖：
java

官網查看：https://github.com/webpack/webpacknode

安裝

前提：由於webpack是一個基於node的項目，因此首先須要確保你的電腦裏面已經安裝了node.js，以及npm。在這裏我使用的版本是：node：v5.8.0 ，npm：3.7.3,如果版本問題，請更新到最新版。
如果有出現npm安裝過慢的狀況，可使用nrm這個項目來進行npm源地址的切換。webpack

首先咱們直接進行全局的安裝，運行以下命令：npm install webpack -g，可能須要一點時間。git

安裝成功後，在命令行輸入webpack -h便可查看當前安裝的版本信息。以及可使用的指令。github

固然，咱們都應該將webapck安裝到當前的項目依賴中，此時就可使用項目的本這樣就可使用項目本地版本的 Webpack。web

11

 
     # 確保已經進入項目目錄 
    
     # 肯定已經有 package.json，沒有就經過 
    
      npm init 
    
     # 建立，直接一路回車就好，後面再來詳細說裏面的內容。 
    
     # 安裝 webpack 依賴 
    
      npm install webpack --save-dev 
    
     # 簡單的寫法：-_-,縮寫形式  
    
      npm i webpack -D 
    
     # –save：模塊名將被添加到dependencies，能夠簡化爲參數-S。 
    
     # –save-dev: 模塊名將被添加到devDependencies，能夠簡化爲參數-D。

安裝好以後咱們的package.json的目錄應該是這樣的：

15

      { 
    
     "name": "first-demo", 
    
     "version": "1.0.0", 
    
     "description": "this is my first-demo", 
    
     "main": "index.js", 
    
     "scripts": { 
    
     "test": "echo \"Error: no test specified\" && exit 1" 
    
      }, 
    
     "author": "guowenfh", 
    
     "license": "MIT", 
    
     "dependencies": {}, 
    
     "devDependencies": { 
    
     "webpack": "^1.12.14" 
    
      } 
    
      }

既然環境都已經安裝好了，那麼咱們就開始來用webpack進行咱們的第一個打包運行程序吧！

首先建立一個靜態頁面 index.html 和一個 JS 入口文件 entry.js,（這裏你想用什麼名字均可以，只須要在打包的時候讀取文件爲該名字就好，不過，到時候就知道這個名字的含義啦！）：

11

 
     <!-- index.html --> 
    
     <html> 
    
     <head> 
    
     <meta charset="utf-8"> 
    
     </head> 
    
     <body> 
    
     <h1 id="app"></h1> 
    
     <script src="bundle.js"></script> 
    
     <!-- 注意這裏引入的不是咱們建立的文件，而是用webpack生成的文件 --> 
    
     </body> 
    
     </html>

1 2	/* entry.js */ document.getElementById('app').innerHTML="這是我第一個打包成功的程序";

文件都已經建立成功了，那麼就開始咱們的打包吧！

webpack entry.js bundle.js

在瀏覽器中打開index.html，就能看到咱們設置的文字啦！：這是我第一個打包成功的程序

這麼簡單的功能直接在html中引入不就行了嗎？確實是這樣的，不過咱們這纔剛剛開始嘛，不要急。

下面咱們再來增長一個文件，名爲first.js內容以下：

 
     var h2= document.createElement("h2") 
    
      h2.innerHTML= 
     "不是吧，那麼快第二個打包程序啦！"; 
    
     document.body.appendChild(h2);

更改 entry.js:

 
     document.getElementById('app').innerHTML="這是我第一個打包成功的程序"; 
    
     //添加 
    
     require("./first.js");

再來進行一次重複的工做，再打包一次。webpack entry.js bundle.js，若是成功，打包過程會顯示日誌：

7

      Hash: b1cfe7ff9d75ce235dc9 
    
      Version: webpack 1.12.14 
    
      Time: 54ms 
    
      Asset Size Chunks Chunk Names 
    
      bundle.js 1.82 kB 0 [emitted] main 
    
      [0] ./entry.js 208 bytes {0} [built] 
    
      [1] ./first.js 145 bytes {0} [built]

Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每一個模塊分配一個惟一的 id 並經過這個 id 索引和訪問模塊。在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。

刷新瀏覽器，能夠發現咱們的剛剛的代碼已經生效，又有了新的文字出現。

好吧，我知道這麼簡單的大家不屑於看，等下咱們升個級。

下面是參考文檔，也至關於一個彙總吧，有不少我還沒實踐到，仍是能夠多看看，好文章應該貼出來

相關標籤/搜索

每日一句

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