webpack的簡單使用

2022-09-11 18:39:08 字數 913 閱讀 5206

1全域性安裝webpack: npm install webpack -g

2專案內安裝webpack包: npm install webpack --s**e-dev

3新增乙個package.json: npm init --yes

4新增乙個配置檔案webpack.config.js具體配置資訊:中文文件,官網

然後寫自己的**

生成最終執行檔案:webpack-p

5瀏覽器實時重新整理 使用webpack-dev-server

全域性安裝:npm install webpack-dev-server -g

webpack-dev-server --hot --inline 會在終端建立乙個伺服器

沒有使用全域性: npm install webpack-dev-server

在package.json內配置指令碼資訊 『名字』:『 webpack-dev-server --hot --inline』

執行指令碼 :npm run 名字

在配置檔案webpack.config.js內設定乙個虛擬路徑 publicpath配合webpack-dev-server使用,在html引入檔案的那裡把path的內容改成publicpath的內容

注:開啟的時候用localhost:8080

6,監聽css變化

中文文件:

在外網上下不下來就用**映象 npm install -g cnpm --registry=

然後用cnpm代替npm

舉個栗子:

webpack.config.js裡面:

module.exports = ,

module:]}}

html裡面引入

index.js:var com = require("./common.js");

引入js和css

webpack的簡單使用

webpack 是乙個前端資源載入 打包工具。它將根據模組的依賴關係進行靜態分析,然後將這些模組按照指定的規則生成對應的靜態資源。從圖中我們可以看出,webpack 可以將多種靜態資源 js css less 轉換成乙個靜態檔案,減少了頁面的請求。npm install g webpack webp...

Node 使用webpack編寫簡單的前端應用

1.使用 node 依賴webpack jquery編寫簡單的前端應用。1 新建乙個目錄 2 在該目錄下,新建乙個package.json檔案。npm init y package.json是專案的配置檔案。3 安裝jquery webpack webpack cli這三個模組。npm instal...

webpack簡單實現

scripts keywords author license isc usr bin env node console.log mypack start 傳入引數是所有引用的路徑和對應執行函式,函式裡面存了 通過eval執行 自執行函式,modules就是傳入的模組及對應 function mod...