webpack 學習筆記 （一）

webpack 做爲當下前端前沿最受歡迎的打包工具，做爲一個前端開發人員是頗有必要去了解下它的。

    題外話： 

　　npm i -D 是 npm install  --save-dev的簡寫，是安裝模塊並保存到package.json的devDependencies

 安裝webpack

　　npm i -D webpack (穩定版)

　　npm i -D webpack@<version>(指定版本號)

使用webpack命令行

　　在packjson.json

"scripts": {
    "build": "webpack src/main.js dist/bundle.js",  // 將指定文件打包到指定目錄的文件
  }

而後就能夠使用命令打包 npm run build

使用Loader

　　一般webpack的配置文件都會放在webpack.config.js文件中（這個是webpack會去默認讀取的）

     基礎內容：

 

const path = require('path');
module.exports = {
  // JavaScript 執行入口文件
  entry: './main.js',
  output: {
    // 將全部依賴的模塊合併輸出到一個bundle.js文件
    filename: 'bundle.js',
    // 將輸出文件都放在dist目錄下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
    {
      // 用正在向嗯表達式去匹配要用該Loader轉換的CSS文件
      test: /\.css$/,
      use: ['style-loader', 'css-loader?minimize']   }
    ]
  }
};

 須要安裝Loader npm i -D style-loader css-loader

解讀

• use屬性的值須要是一個由Loader名稱組成的數組，Loader的執行順興是由後到前的
• 每一個Loader均可以經過URL querstring 的方式來傳入參數， 例如 css-loader?minimize中的minimize高祖css-loader要開啓css壓縮

 

使用Plugin

　　Plugin是用來擴展Webpack功能的，經過在構建流程裏注入鉤子實現，它爲Webpack帶來了很大的靈活性。

　配置方面： plugins屬性是一個數組，裏面的每一項都是插件的一個實例，在實例化一個組件時能夠經過構造函數傳入這個組件支持的配置屬性。

使用DevServer

  做用：

• 提供HTTP服務而不是使用本地文件預覽
• 監聽文件的變化並自動刷新網頁，作到實時預覽
• 支持Source Map, 以方便調試

 安裝： npm i  -D webpack-dev-server

啓動配置：

"build": "webpack-dev-server --hot --devtool source-map"

 

當你啓動的時候會看到這樣一串日誌：

　　Project is running at http://localhost:8081/

       webpack output is served from /

這意味着DevServer啓動的HTTP服務器在8081端口，DevServer啓動後會一直主流在後臺保持運行，訪問這個網址，就能獲取項目根目錄下的index.html

這時候還不會造成打包文件。

實施預覽：

　　開啓： webpack --watch

這樣的話就會實施知道改動代碼就會進行更新客戶端的內容（這回刷新整個頁面）

模塊熱替換：

　　開啓： --hot

這樣的話，代碼更改只會實現局部刷新

支持Source Map

　　開啓 --devtool source-map

總結：

• Entry: 入口， webpack執行建立的第一步將從Entry開始，可抽象成輸入
• Module: 模塊， 在Webpack裏一切皆模塊，一個模塊對應一個文件。Webpack會從配置的Entry開始遞歸找出全部的依賴的模塊
• Chunk: 代碼塊，一個Chunk由多個模塊組合而成，用於代碼合併與分割
• Loader: 模塊加載器，用於經模塊的原內容按照需求裝換成新內容
• Plugin: 擴展插件， 在Webpack構建流程中的特定時機注入擴展邏輯，來改變構建結果或作咱們想要的事情
• Output: 輸出結果，在Webpack通過一系列處理並得出最終想要的代碼後輸出結果。