vue的學習 webpack(四)

2022-06-14 18:24:10 字數 1856 閱讀 8331

安裝 cnpm install -g webpack   (同樣在我們的專案資料夾下執行)

安裝 cnpm install -g webpack-cli(同樣在我們的專案資料夾下執行)

檢視是否安裝成功

建立專案   在專案裡編寫

1. hello.js檔案

//

暴露乙個方法

exports.hello=function () ;

2.main.js 檔案 (主程式檔案)

var hello = require("

./hello

"); //

引用hello檔案

hello.hello(); //

呼叫 hello問價裡的hello方法

3.webpack.config.js (打包檔案)

module.exports =

};

就可以執行 webpack 命令了

輸入 webpack 就可以把  es6 降低到 使es5支援的

如果說指令不存在  (或者 直接在cmd 也可以)

操作結束重啟idea

打包完會出現  bundel.js檔案  打包完成

建立   index.html   

"en

">

開啟網頁

網頁的展示

監聽 :webpack --watch

可以實時更新實時打包   (熱部署)    control+c  退出

webpack 總結 一句就是,從es6的語法打包成es5的語法 (有的瀏覽器還停留在es5)

vue簡單學習 webpack

本地安裝 3.2.1 js檔案之間的匯出和匯入方式 方式1 a.js import from b 測試 let sum util2.sum alert sum 2 b.js export const util 方式2 a.js import from b 測試 let sum util2.sum a...

webpack學習筆記(四)

當前優化 配置本地開發環境 引入webpack dev server 區分開發環境和生產環境 tips node sass可能出現安裝不成功的情況,請使用cnpm並且刪除依賴重試 npm install npm run build 路徑.webpack.dev.config.js const pat...

Vue學習之webpack中使用vue 十七)

一 包的查詢規則 1 在專案根目錄中找有沒有 node modules 的資料夾 2 在 node modules 中根據包名,找對應的vue 資料夾 3 在vue 資料夾中,找 乙個叫做 package.json的包配置檔案 4 在package.json檔案中,查詢乙個main 屬性 main屬...