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...