webpack學習指南

2022-04-23 12:51:11 字數 1630 閱讀 2369

webpack是乙個專案構建工具,webpack可以將多種靜態資源,比如js,css,less等轉換成乙個靜態檔案,還有就是一些瀏覽器不支援的高階語法,可以通過打包後轉變為被瀏覽器所識別的的語法

至於環境配置,這裡不做多說,node 和 npm環境備好

建立src源檔案目錄,建立index.html 和 index.js

在index.html中,來十個li (ul>li*10)

安裝一下jquery,開啟目錄終端,鍵入命令 npm install jquery -s

在index.js中編寫**,實現隔行換色

import $ from "jquery";

$(function

() )

如果這時候,我們在index.html中引入這個js檔案,開啟瀏覽器的話,是會報錯的,因為 import $ from "jquery" 這句**瀏覽器根本不認識,這個時候我們的webpack的作用就來,我們先使用webpack將這個js檔案打包成瀏覽器支援的格式,然後我再在index.html中引入打包好的js,就可以實現我們想要的效果了,下面我們一步一步來操作一哈;

然後在我們的專案根路徑下建立乙個檔案: webpack.config.js

開啟package.json檔案,在scripts屬性下,我們需要建立新的指令碼:dev

然後就是啟動webpack進行打包了,這裡說點小細節:

既然要操作webpack,那當然是動刀 webpack.config.js 啦

修改package.json中的scripts屬性中的dev為如下所示:

然後修改index.html中的引入js為:

然後重新打包: npm run dev

修改webpack.config.js檔案如下

既然是webpack相關的配置,那我們就去webpack.config.js中去配置相關的規則

然後就是index.js中把css給引如

打包處理sass型別檔案

打包處理postcss型別檔案,自動新增css的相容性字首(-ie-、-webkit-)

npm install postcss-loader autoprefixer -d

打包樣式表中的以及字型檔案

打包js檔案中的高階語法

安裝babel語法外掛程式包

在根目錄建立babel.config.js檔案並配置

他們的配置規則如下所示

配置規則,修改webpack.config.js

安裝vue

在index.js中引入vue

下面我們想將這個元件展示在頁面中,

然後在index.js中

.

Linux 學習指南

第乙個話題,嵌入式學習的路徑有哪些.這是乙個初學者常問的問題,也是初學者問嵌入式該如何入門的根源.我感覺有兩個方面,偏硬和偏軟.我不認為嵌入式開發軟體佔絕對比重,相反,軟硬體都懂,才是嵌入式高手所應該追求的,也是高手的必由之路.硬體道路 第一步 pcb設計,一般為開發板的電路裁減和擴充,由開發板原理...

Perl學習指南

首先,請考慮如下問題 如果你學過其他語言,那就可以從學習 perl 的語法開始 perl語言入門 或者是從 perl 的自帶文件。當你對 perl 的語法了解後,嘗試書中的例子,試著寫一些簡單的程式。很快你就會發現 perl 和你以前學過的語言類似。如果你是乙個有經驗的程式設計師,你可能直接會從讀程...

SAP HANA 學習指南

sap hana 學習指南 第一部分 sap hana 概覽 第二部分 sap hana資料庫體系結構 2.1 體系結構概覽 2.2 記憶體結構 2.3 sap hana 多版本併發控制 sap hana mvcc 2.4 列儲存 column store 2.5 行儲存 row store 2.6...