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

時間 2020-05-07

標籤 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 拿到配置對象後，就拿到了配置對象中，指定的入口和出口，而後進行打包構建。

相關標籤/搜索

每日一句

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