webpack 4 x安裝命令

2021-09-18 05:57:36 字數 650 閱讀 3412

執行npm i webpack -g全域性安裝webpack,這樣就能在全域性使用webpack的命令

在專案根目錄中執行npm i webpack安裝到專案依賴中

執行npm init -y初始化專案

建立專案基本的目錄結構src 和 dist,在src裡新建index.html

使用npm i jquery -s安裝jquery類庫

建立index.js並書寫各行變色的**邏輯:

// 匯入jquery類庫

import $ from 'jquery'

// 設定偶數行背景色,索引從0開始,0是偶數

$('#list li:even').css('backgroundcolor','lightblue');

// 設定奇數行背景色

$('#list li:odd').css('backgroundcolor','pink');

安裝npm install webpack-cli -d,意思是安裝到專案本地依賴,但是專案本地並沒有安裝webpack,所以我們安裝到全域性,npm install webpack-cli -g

7.輸入 webpack ./src/index.js --mode development 進行打包

參考

webpack4 x安裝和配置

npm install webpack g我們在合適位置新建乙個資料夾wpk test,用於存放我們的專案。命令列中定位到webpack test資料夾下,輸入以下命令進行專案的初始化 npm init這裡,要求設定很多選項,可以按專案情況配置也可以不填直接回車。完成後,我們發現資料夾中增加了pac...

webpack 4 X 基礎編譯

webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式,而是直接執行webpack mode development或者webpack mode production,這樣便會預設進行打包,入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...

webpack4 x學習筆記

有輸入必須有輸出,今天就來輸出一下學習webpack的過程。不得不先吐槽一下,比起可愛的grunt和好用的gulp,對webpack真心愛不起來!還有乙個血的教訓 千萬不要偷懶,有問題直接去官網。本文旨在記錄學習webpack的過車和遇到的問題,適合對node和webpack基礎知識有些了解的開發人...