Vue學習之webpack調用第三方loader(十五）

時間 2019-11-08

標籤 vue 學習 webpack 調用第三方 loader 十五简体版

原文原文鏈接

---恢復內容開始---css

1、webpack 默認只能打包處理 JS 類型的文件，沒法處理其餘的非 JS 類型的文件；html

若是非要處理非 JS 類型的文件，咱們須要手動安裝一些合適第三方 loader 加載器；前端

2、webpack 處理第三方文件類型的過程：vue

一、發現這個要處理的文件不是JS文件，而後就去配置文件中，查找有沒有對應的第三方 loader 規則；node

二、若是能找到對應的規則，就會調用對應的 loader 處理這種文件類型；jquery

三、在調用 loader 的時候，是從後往前調用的；webpack

四、當最後的一個 loader 調用完畢，會把處理的結果，直接給webpack 進行打包合併，最終輸出到bundle.js中去。git

3、導入CSS文件：web

一、安裝 npm i style-loader css-loader -Dshell

二、打開 webpack.config.js 這個配置文件，在裏面，新增一個配置節點，叫作 module,它是一個對象；

在這個 module 對象身上，有個 rules 屬性，這個 rules 屬性是個數組，這個數組中，存在了全部第三方文件的匹配和處理規則。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- 直接引入main.js會由於ES6新語法的問題，瀏覽器不識別
    經過webpack這個前端構建工具，把main.js轉成bundle.js -->
    <!-- 代碼 webpack-dev-server 會將生成一個虛擬的bundle.js的文件，減小內存！ -->
    <!-- <script src="http://localhost:8081/bundle.js"></script> -->
    <!-- 當使用 html-webpack-plugin 以後，咱們再也不須要手動處理 bundle.js 的引用路徑了
     由於，這個插件，已經幫咱們自動建立了一個合適的 script ，而且，引用了正確的路徑-->
    <link
      rel="stylesheet"
      href="/node_modules/bootstrap/dist/css/bootstrap.css"
    />
    <!-- npm i bootstrap -S -->
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
    <div class="box"></div>
    <!-- <span class="glyphicon glyphicon-search" aria-hidden="true"></span> -->
  </body>
</html>

html,
body {
  padding: 0;
  margin: 0;

  li {
    font-size: 12px;
    line-height: 30px;
  }

  .box {
    width: 220px;
    height: 120px;
    background: url("../images/moye.jpg");
    background-size: cover;
  }
}

//這是項目JS的主入口文件
//全局安裝webpack  npm i  webpack -g  (i 爲 install   g爲 global 全局)
//輸入 npm init -s
//          (這個命令會在當前目錄生成一個package.json文件，這個文件中會記錄一些關於項目的信息，
//              好比：項目的做者，git地址，入口文件、命令設置、項目名稱和版本號等等，通常狀況下這個文件是必需要有的，
//              方便後續的項目添加和其餘開發人員的使用。)
//                  (--save、-S參數意思是把模塊的版本信息保存到dependencies（生產環境依賴）中，
//                 即你的package.json文件的dependencies字段中)
// npm i jquery -S 導入jquery
//              --save、-S參數意思是把模塊的版本信息保存到dependencies（生產環境依賴）中，
//                  即你的package.json文件的dependencies字段中
//因爲ES6的代碼，過高級了，瀏覽器解析不了，須要進行轉換
import $ from "jquery";

import "./css/index.css";
import "./css/index.less";
import "./css/index.scss";
// import "bootstrap/dist/css/bootstrap.css"; 引入node_mudules中的文件，前面不須要加此路徑，

$(function() {
  $("li:odd").css("backgroundColor", "yellow");
  $("li:even").css("backgroundColor", function() {
    return "#" + "D97634";
  });
});

// 1.webpack可以處理JS文件的相互依賴關係；
// 2.webpack可以處理JS的兼容問題，把高級的、瀏覽器不能識別的語法，轉爲
//低級的，瀏覽器能正常識別的語法；
// webpack 要打包的文件的路徑 打包好的輸出的文件的路徑

//因版本不同，沒法進行文件的轉換，在package.json中致使寫下如下兩行代碼
//    "dev": "webpack --mode development",
//    "build": "webpack --mode production"這樣才能將main.js轉爲bundle.js

//使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能：是一個用來快速搭建本地運行環境的工具
//1. 運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴；
//2.安裝完畢後，這個工具的用法 和 webpack 命令的用法，徹底同樣；
//3.因爲，咱們是在項目中，本地安裝的 webpack-dev-server ，因此，沒法把它看成腳本命令，
//  在powershell 終端中直接執行；（只有那些安裝到全局-g的工具，才能在終端中正常執行）
//4.webpack-dev-server 這個工具，若是想要正常運行，要求，在本地項目中，必須安裝webpack;
//5.webpack-dev-server 幫咱們打包生成的 bunld.js 文件，並無存放到 實際 的物理磁盤上，
// 而是，直接託管到了 電腦的內存中，因此，咱們在項目根目錄中，根本找不到這個打包好的 bundle.js
//6.咱們能夠認爲，webpack-dev-server 把打包好的文件，以一種虛擬的形式，託管到了 我們項目的根目錄中，
// 雖然咱們看不到它，可是，能夠認爲 和 dist src node_modules 平級，有一個看不見的文件，叫作 bundle.js

//  "dev": "webpack-dev-server --open --port 8081 --contentBase src --hot",
//                           -直接打開-端口號    -要顯示的頁面路徑(這下面的index.html) -減小源代碼的刷新

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "webpack-cli": "^3.3.5"
  },
  "devDependencies": {
    "css-loader": "^3.0.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "node-loader": "^0.6.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "scss-loader": "0.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.1",
    "webpack": "^4.35.2",
    "webpack-dev-server": "^3.7.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8081 --contentBase src --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

const path = require("path");

// 導入在內存中生成HTML頁面的插件
//只要是插件，都必定要放到 plugins節點中去
//這個插件的兩個做用：
//1.自動在內存中根據指定頁面生成一個內存的頁面；
//2.自動，把打包好的 bundle.js 追加到頁面中去
const htmlWebpackPlugin = require("html-webpack-plugin");

//這個配置文件其實就是一個JS文件，經過NODE中的操做，向外暴露一個配置對象
module.exports = {
  entry: path.join(__dirname, "./src/main.js"), //入口，要打包的文件
  output: {
    //輸出相關配置
    path: path.join(__dirname, "./dist"), //指定打包好的文件，輸出到哪一個文件夾目錄中去
    filename: "bundle.js" //指定輸出的文件名稱
  },
  mode: "development", //由於版本不同，須要添加這個才能完成輸出！！！

  plugins: [
    //配置插件的節點
    new htmlWebpackPlugin({
      //建立一個在內存中生成HTML 頁面的插件
      template: path.join(__dirname, "./src/index.html"), //指定模板頁面，將會根據指定的頁面路徑，
      //去生成內存中的頁面
      filename: "index.html" // 指定生成的頁面的名稱
    })
  ],

  module: {
    //這個節點，用於配置全部的第三方模塊加載器
    rules: [
      // 全部第三方模塊的匹配規則
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, //配置處理.css文件的第三方loader規則
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }, //處理.less文件
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }, //處理.scss文件
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: "url-loader?limit=616&name=[hash:8]-[name].[ext]"
      } //處理圖片文件 npm i url-loader file-loader -D
      //limit 給定的值，是圖片的大小，單位是byte，若是咱們引用的圖片，大於或等於給定的值，
      // 則不會被轉爲base64 格式的字符串，若是小於給定的值，則會轉爲base64的字符串
      //哈希值 正常爲32位，這裏面隨便設置幾位，爲了區分兩個同名的圖片
      // {
      //   test: /\.(ttf|eot|svg|woff|woff2)$/,
      //   use: "url-loader" //處理字體文件
      // }
    ]
  }
};

//在控制檯輸入  webpack 對項目進行打包，此時webpack進行如下幾步：
//1.首先，webpack發現，咱們並無經過命令的形式，給它指定入口和出口；
//2.webpack就會去項目的根目錄中，查找一個叫作' webpack.config.js'的配置文件；
//3.當找到配置文件後，webpack 會去解析執行這個配置文件，當解析執行完配置文件後，
//   就獲得了配置文件中，導出的配置對象；
//4.當webpack 拿到配置對象後，就拿到了配置對象中，指定的入口和出口，而後進行打包構建。

相關標籤/搜索

每日一句

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