webpack的總結

来源:https://www.cnblogs.com/ygjzs/archive/2019/11/13/11854077.html
-Advertisement-
Play Games

Vue.js Day5 Webpack 在網頁中會引用哪些常見的靜態資源？ + JS .js .jsx .coffee .ts（TypeScript 類 C 語言） + CSS .css .less .sass .scss + Images .jpg .png .gif .bmp .svg + 字體 ...


Vue.js - Day5 - Webpack

在網頁中會引用哪些常見的靜態資源？

  • JS
  • .js .jsx .coffee .ts（TypeScript 類 C# 語言）
  • CSS
  • .css .less .sass .scss
  • Images
  • .jpg .png .gif .bmp .svg
  • 字體文件（Fonts）
  • .svg .ttf .eot .woff .woff2
  • 模板文件
  • .ejs .jade .vue【這是在webpack中定義組件的方式，推薦這麼用】

網頁中引入的靜態資源多了以後有什麼問題？？？

  1. 網頁載入速度慢， 因為 我們要發起很多的二次請求；
  2. 要處理錯綜複雜的依賴關係

如何解決上述兩個問題

  1. 合併、壓縮、精靈圖、圖片的Base64編碼
  2. 可以使用之前學過的requireJS、也可以使用webpack可以解決各個包之間的複雜依賴關係；

什麼是webpack?

webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具；

如何完美實現上述的2種解決方案

  1. 使用Gulp， 是基於 task 任務的；
  2. 使用Webpack， 是基於整個項目進行構建的；
  • 藉助於webpack這個前端自動化構建工具，可以完美實現資源的合併、打包、壓縮、混淆等諸多功能。
  • 根據官網的圖片介紹webpack打包的過程
  • webpack官網

webpack安裝的兩種方式

  1. 運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
  2. 在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中

初步使用webpack打包構建列表隔行變色案例

  1. 運行npm init初始化項目，使用npm管理項目中的依賴包
  2. 創建項目基本的目錄結構
  3. 使用cnpm i jquery --save安裝jquery類庫
  4. 創建main.js並書寫各行變色的代碼邏輯：
    // 導入jquery類庫
    import $ from 'jquery'

    // 設置偶數行背景色，索引從0開始，0是偶數
    $('#list li:even').css('backgroundColor','lightblue');
    // 設置奇數行背景色
    $('#list li:odd').css('backgroundColor','pink');
  1. 直接在頁面上引用main.js會報錯，因為瀏覽器不認識import這種高級的JS語法，需要使用webpack進行處理，webpack預設會把這種高級的語法轉換為低級的瀏覽器能識別的語法；
  2. 運行webpack 入口文件路徑 輸出文件路徑對main.js進行處理：
webpack src/js/main.js dist/bundle.js

使用webpack的配置文件簡化打包時候的命令

  1. 在項目根目錄中創建webpack.config.js
  2. 由於運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在webpack.config.js中配置這兩個路徑：
    // 導入處理路徑的模塊
    var path = require('path');

    // 導出一個配置對象，將來webpack在啟動的時候，會預設來查找webpack.config.js，並讀取這個文件中導出的配置對象，來進行打包處理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        }
    }

實現webpack的實時打包構建

  1. 由於每次重新修改代碼之後，都需要手動運行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現代碼實時打包編譯，當修改代碼之後，會自動進行打包構建。
  2. 運行cnpm i webpack-dev-server --save-dev安裝到開發依賴
  3. 安裝完成之後，在命令行直接運行webpack-dev-server來進行打包，發現報錯，此時需要藉助於package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下並沒有生成bundle.js文件，這是因為webpack-dev-server將打包好的文件放在了記憶體中
  • 把bundle.js放在記憶體中的好處是：由於需要實時打包編譯，所以放在記憶體中速度會非常快
  • 這個時候訪問webpack-dev-server啟動的http://localhost:8080/網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script>
  • 為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：
"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

使用html-webpack-plugin插件配置啟動頁面

由於使用--contentBase指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性，所以推薦大家使用html-webpack-plugin插件配置啟動頁面.

  1. 運行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
  2. 修改webpack.config.js配置文件如下：
    // 導入處理路徑的模塊
    var path = require('path');
    // 導入自動生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        },
        plugins:[ // 添加plugins節點配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動生成的HTML文件的名稱
            })
        ]
    }
  1. 修改package.json中script節點中的dev指令如下：
"dev": "webpack-dev-server"
  1. 將index.html中script標簽註釋掉，因為html-webpack-plugin插件會自動把bundle.js註入到index.html頁面中！

實現自動打開瀏覽器、熱更新和配置瀏覽器的預設埠號

註意：熱更新在JS中表現的不明顯，可以從一會兒要講到的CSS身上進行介紹說明！

方式1：

  • 修改package.json的script節點如下，其中--open表示自動打開瀏覽器，--port 4321表示打開的埠號為4321，--hot表示啟用瀏覽器熱更新：
"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

  1. 修改webpack.config.js文件，新增devServer節點如下：
devServer:{
        hot:true,
        open:true,
        port:4321
    }
  1. 在頭部引入webpack模塊：
var webpack = require('webpack');
  1. 在plugins節點下新增：
new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

  1. 運行cnpm i style-loader css-loader --save-dev
  2. 修改webpack.config.js這個配置文件：
module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則
        ]
    }
  1. 註意：use表示使用哪些模塊來處理test所匹配到的文件；use中相關loader模塊的調用順序是從後向前調用的；

使用webpack打包less文件

  1. 運行cnpm i less-loader less -D
  2. 修改webpack.config.js這個配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

  1. 運行cnpm i sass-loader node-sass --save-dev
  2. 在webpack.config.js中添加處理sass文件的loader模塊：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack處理css中的路徑

  1. 運行cnpm i url-loader file-loader --save-dev
  2. 在webpack.config.js中添加處理url路徑的loader模塊：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
  1. 可以通過limit指定進行base64編碼的圖片大小；只有小於指定位元組（byte）的圖片才會進行base64編碼：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel處理高級JS語法

  1. 運行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包
  2. 運行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法
  3. 在webpack.config.js中添加相關loader模塊，其中需要註意的是，一定要把node_modules文件夾添加到排除項：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  1. 在項目根目錄中添加.babelrc文件，並修改這個配置文件如下：
{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}
  1. 註意：語法插件babel-preset-es2015可以更新為babel-preset-env，它包含了所有的ES相關的語法；

註意：

有時候使用npm i node-sass -D裝不上，這時候，就必須使用 cnpm i node-sass -D

在普通頁面中使用render函數渲染組件

在webpack中配置.vue組件頁面的解析

  1. 運行cnpm i vue -S將vue安裝為運行依賴；

  2. 運行cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝為開發依賴；

  3. 運行cnpm i style-loader css-loader -D將解析轉換CSS的包安裝為開發依賴，因為.vue文件中會寫CSS樣式；

  4. 在webpack.config.js中，添加如下module規則：


module: {

    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

      { test: /\.vue$/, use: 'vue-loader' }

    ]

  }
  1. 創建App.js組件頁面：

    <template>

      <!-- 註意：在 .vue 的組件中，template 中必須有且只有唯一的根元素進行包裹，一般都用 div 當作唯一的根元素 -->

      <div>

        <h1>這是APP組件 - {{msg}}</h1>

        <h3>我是h3</h3>

      </div>

    </template>



    <script>

    // 註意：在 .vue 的組件中，通過 script 標簽來定義組件的行為，需要使用 ES6 中提供的 export default 方式，導出一個vue實例對象

    export default {

      data() {

        return {

          msg: 'OK'

        }

      }

    }

    </script>



    <style scoped>

    h1 {

      color: red;

    }

    </style>
  1. 創建main.js入口文件：

    // 導入 Vue 組件

    import Vue from 'vue'



    // 導入 App組件

    import App from './components/App.vue'



    // 創建一個 Vue 實例，使用 render 函數，渲染指定的組件

    var vm = new Vue({

      el: '#app',

      render: c => c(App)

    });

在使用webpack構建的Vue項目中使用模板對象？

  1. 在webpack.config.js中添加resolve屬性：
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

ES6中語法使用總結

  1. 使用 export default 和 export 導出模塊中的成員; 對應ES5中的 module.exports 和 export

  2. 使用 import ** from ** 和 import '路徑' 還有 import {a, b} from '模塊標識' 導入其他模塊

  3. 使用箭頭函數：(a, b)=> { return a-b; }

在vue組件頁面中，集成vue-router路由模塊

vue-router官網

  1. 導入路由模塊：

import VueRouter from 'vue-router'
  1. 安裝路由模塊：

Vue.use(VueRouter);
  1. 導入需要展示的組件:

import login from './components/account/login.vue'

import register from './components/account/register.vue'
  1. 創建路由對象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});
  1. 將路由對象，掛載到 Vue 實例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 將路由對象，掛載到 Vue 實例上

});
  1. 改造App.vue組件，在 template 中，添加router-link和router-view：

    <router-link to="/login">登錄</router-link>

    <router-link to="/register">註冊</router-link>



    <router-view></router-view>

組件中的css作用域問題

抽離路由為單獨的模塊

相關文章

babel-preset-env：你需要的唯一Babel插件
Runtime transform 運行時編譯es6


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Oracle資料庫小知識點整理
    -- 資料庫存儲數據 -- 市面上主流的資料庫有哪些 -- 甲骨文 oracle mysql -- IBM db2 金融 -- 微軟 sqlserver --這些是關係型資料庫。 --NOSQL 不僅僅是sql,典型 mongodb. --資料庫的語言有哪些分類 -- *************** ...
  • [20191113]oracle共用連接模式埠2.txt
    [20191113]oracle共用連接模式埠2.txt--//昨天的測試鏈接：http://blog.itpub.net/267265/viewspace-2663651/=>[20191112]oracle共用連接模式埠.txt --//鏈接裡面還提到http://www.usn-it.de ...
  • oracle鎖相關數據字典
    --殺掉進程 sid,serial# alter system kill SESSION '64,177'; --查看被鎖的表 select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_obj... ...
  • Box 黑科技 —— 支持手機端反編譯 ！Box 黑科技 —— 支持手機端反編譯 ！
    項目地址： "Box" 文末掃碼獲取最新安裝包 。 前言 有將近一個月沒有更新文章了，一方面在啃 AOSP ，消化起來確實比較慢。在閱讀的過程中，有時候上來就會陷入源碼細節，其實這是沒有必要的。剛開始更多的應該從整體脈絡上去理解，摸清整個流程之後再去有針對性的看某些細節，才會事半功倍。下一篇應該會帶 ...
  • 更改Android設備System目錄的文件的寫入許可權
    有時候我們需要修改/system目錄中文件的許可權，比如將該目錄下的腳本設置寫入許可權等，但該目錄預設只有read許可權，此時應該怎麼辦？１、安卓設備請確保root;２、連接安卓設備，確保全卓設備打開了“usb調試”選項，然後打開終端，輸入adb shell，進入後輸入 su，以root許可權調試;３、執行 ...
  • HTML5實現無刷新修改URL
    前言 今天在做一個vue的搜索功能，需要從搜索結果頁面跳轉到細節頁面，然後點擊返回還能返回到剛剛的結果頁面，如果只用window.history.go( 1)當然會重新刷新搜索頁面，當然是不行的。 我嘗試了倆種方式來修改url: 1. window.location.href,拼接一個搜索的key值 ...
  • HTML連載49-清除浮動的第三種方式（內外牆法）
    一、清除浮動的第三種方式 1.隔牆法有兩種​如下：外牆法和內牆法​。​ 2.外牆法 （1）在兩個盒子中間添加一個額外的塊級元素 （2）給這個額外添加的塊級元素設置：clear:both;屬性 註意點：外牆法可以讓第二個盒子使用margin-top屬性 但是不能讓第一個盒子使用margin-botto ...
  • l瀏覽器執行JS
    瀏覽器執行JS 1. 瀏覽器分成兩部分：渲染引擎和JS引擎 渲染引擎：用來解析HTML與CSS，俗稱內核，比如chrome瀏覽器的blink，老版本的webkit JS引擎：俗稱JS解析器。用來讀取網頁中的JS代碼，對其處理後運行，比如chrome瀏覽器的V8 【註意】 瀏覽器本身並不會執行JS代碼 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類