初識webpack

時間  2020-06-15
標籤 webpack 简体版
原文   原文鏈接

什麼是webpack

在模塊化編程盛行的今天，每個js、css均可以獨立存在，而每個獨立存在的文件又可能採起不一樣的工程化語言方法，好比typescript寫js，用sacc寫css等等，這時候咱們就須要一個簡單的工具，完成這種統一編譯解析的功能。

webpack 處理程序的時候，他會遞歸地構建一個依賴關係圖，其中包含應用程序的每個模塊，而後將全部這些模塊打包成一個或者多個 bundle（包）
複製代碼

webpack的安裝方法

// 推薦局部安裝，當維護一些老項目的時候有可能由於webpack的版本出現一些問題javascript

  • 建立一個文件夾 打開cmd 輸入 npm init 指令css

  • 安裝webpack webpack-cli (--save-dev 開發階段使用 --save 生產環境還要依賴)html

    • npm install webpack --save-devjava

    • npm install webpack-cli --save-devnode

注意事項
  • 使用npx webpack -v npx webpack-cli -v 查看版本，驗證是否安裝成功 ）
  • npm 安裝指定版本的庫 npm install webpack@4.41.1 --save-dev
  • 當咱們不知道一個庫到底又多少個版本 npm info webpack

webpack的初步接觸

// 咱們用一個dome來演示 在文件中新建 src目錄 而後在新建index.html 和 js文件夾webpack

// 在未使用工程化構建項目編碼時 html 與 js文件分離，當咱們項目越大時文件就越大，速度慢，難以維護
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 初步接觸</title>
</head>
<body>
	<p> 這是基本網頁內容</p>】
    <script scr="./js/index.js"></script>
</body>
</html>
複製代碼
// index.js
let root = document.querySelector('body');

let eleHeader = document.createElement('h1');
eleHeader.innerText = '這是網頁頭部';

let eleSideBar = document.createElement('div');
eleSideBar.innerText = '這是網頁側邊欄';

let eleContent = document.createElement('div');
eleContent.innerText = '這是網頁主要內容';

// 添加進body
root.appendChild(eleHeader);
root.appendChild(eleSideBar);
root.appendChild(eleContent);
複製代碼
// 稍微懂點 html 和 js 分離的
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 初識</title>
</head>
<body>
    <p>這是網頁基本內容</p>

    <!-- 在這裏咱們要注意代碼的前後順序，不然會影響頁面效果 -->
    <script src="js/index.js"></script>
    <script src="js/header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="js/content.js"></script>
</body>
</html>
複製代碼
// index.js
let root = document.querySelector('body');
複製代碼
// header.js
let eleHeader = document.createElement('h1');
eleHeader.innerText = '這是網頁頭部';
root.appendChild(eleHeader);
複製代碼
// sidear.js
let eleSidebar = document.createElement('div');
eleSidebar.innerText = '這是網頁側邊欄';
root.appendChild(eleSidebar);
複製代碼
// content.js
let eleContent = document.createElement('div');
eleContent.innerText = '這是網頁主要內容';
root.appendChild(eleContent);
複製代碼
// 在稍微封裝一下
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 初識</title>
</head>
<body>
    <p>這是網頁基本內容</p>

    <!-- 在這裏咱們要注意代碼的前後順序，不然會影響頁面效果 -->
    <script src="js/index.js"></script>

</body>
</html>
複製代碼
// index.js
import { createContent } from "./contnet";
import { createSidebar } from "./sidebar";
import { createHeader } from "./header";

let root = document.querySelector('body');

// 進行調用 只須要在這裏保證順序
createHeader(root);
createSidebar(root);
createContent(root);

複製代碼
// header.js
export const createHeader = (root) => {
  let eleHeader = document.createElement('h1');
  eleHeader.innerText = '這是網頁頭部';
  root.appendChild(eleHeader);
}
複製代碼
// sidear.js
export const createSidebar = (root) => {
  let eleSidebar = document.createElement('div');
  eleSidebar.innerText = '這是網頁側邊欄';
  root.appendChild(eleSidebar);
}
複製代碼
// content.js
export const createContent = (root) => {
  let eleContent = document.createElement('div');
  eleContent.innerText = '這是網頁主要內容';
  root.appendChild(eleContent);
}
複製代碼
依然有問題
  1. 依然解決不了代碼文件須要按順序，不然就會出錯
  2. 網頁引入文件過多，網頁加載的時候須要大量的HTTP請求
  3. 對老版本瀏覽器或者其餘瀏覽器存在兼容問題
因此就引入的webpack 來構建和開發項目

執行 npx webpack 文件路徑web

npx webpack src/js/index.js正則表達式

打包完成以後 你將會看到一個index.js 所依賴的文件，而後手動新建 index.html 引入main.js 便可typescript

webpack 基礎配置
// 在根目錄新建一個 webpack.config.js 配置文件 若是你不建立，就按照默認來打包

const path = require('path'); // 導入 node 中 path模塊 webpack時運行在node環境中的
module.exports = {
  entry: './src/dome3/js/index.js', // 入口文件，構建依賴圖的起點
  output: {
    filename: "index.js", // 打包的文件名稱
    path: path.resolve(__dirname, 'bundle') // 出口文件，打包結束存放的位置，以及文件夾名稱
  }
}
複製代碼
package.json 的 script命令映射表
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // npm run build 便可打包
  },
複製代碼
打包結束以後的一些信息參數

Hash 本次打包惟一的hash值，當你沒有改變代碼時，再次打包依然是同樣的npm

Version 使用的webpack版本

Time 打包所耗時間

Asset 打包結束的最終文件（可能有多個文件）

size 打包文件大小

chunks js文件對應的ID

chunks Name js文件對象的名字

webpack 的 loader -- file-loader

loader 讓webpack處理一些非js文件，例如圖片，視頻等

file-loader 做用
  • 當file-loader 檢測到test 的正則表達式的規則的話，回把改資源移動到output的指定文件夾下，而且設置名字
  • 當把圖片挪到output的指定文件夾以後，file-loader 會把該圖片相對於文件夾的相對位置做爲返回值做爲返回值，返回給引入文件時定義的變量
  • 上述動做不限於圖片，能夠用於一切文件
// npm install --save-dev file-loader
const path = require('path');

module.exports = {
  mode: "development", // 開發環境 production 生產環境
  entry: './src/dome3/js/index.js',
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/i,
        use: {
          loader: "file-loader",
          options: {
            outputPath: './images'
            // name 設置名字規則 默認32位的hash值
          }
        }
      }
    ]
  }
}

複製代碼
url-loader
// npm install --save-dev url-loader
// url-loader 解析的資源裏面，圖片文件不在乎，其餘一切正常，url-loader總體上和file-loader差很少
// 可是就是在默認狀況下，圖片回把解析成爲base 64 編碼麼熱不是直接生成一個文件
const path = require('path');

module.exports = {
  mode: "development", // 開發環境 production 生產環境
  entry: './src/dome3/js/index.js',
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/i,
        use: {
          loader: "file-loader",
          options: {
            outputPath: './images',
            limit: 2048 // 小於2048字節就解析成base 64，大於就直接打包成文件
          }
        }
      }
    ]
  }
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程