webpack 入門級 傻瓜式教學

2022-07-20 10:03:15 字數 1297 閱讀 7944

首先新建乙個專案資料夾  名字隨便  避免掉關鍵字

在檔案中開啟控制台，確保路徑是當前的資料夾

使用命令 npm init  建立乙個package.json  包含各種資訊，自己填寫，預設也可以

注意點：webpack 4+以上的，都需要安裝webpack-cli 

安裝 webpack-cli 後面我們需要使用webpack打包我們需要打包的檔案

npm i webpack-cli -s  當前專案安裝
npm i webpack-cli -g  全域性安裝


在專案中新建乙個webpack.config.js用來存放配置**


//


初始化版本


module.exports =


}
提前寫好執行的js檔案，在當前的控制台，直接使用命令  webpack   打包

打包之後會新增加乙個dist的資料夾

在html中引用當前打包之後的js

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


meta 


name


="viewport"


content


="width=device-width, initial-scale=1.0"


>


<


title


>document


title


>


head


>


<


body


>


body


>


<


script 


src="./dist/bundle.js"


>


script


>


html


>
執行當前的html檔案js內容就會被載入了

ps  檔案目錄

Webpack 傻瓜式指南 一

modules with dependencies webpack module bundler static assetss js js png webpack傻瓜式指南 npm install g webpack 定義 module bundler 把有依賴關係的各種檔案打包成一 系列的靜態資源...

SQLyog無法登入（傻瓜式教學）

access denied for user root localhost using password yes access denied for user root localhost using password no 問題如下 輸入密碼為 yes 不輸入密碼為 no 解決辦法 重新設定roo...

ELK 傻瓜式入門安裝

elk又稱elkstack，官網 什麼是elk，通俗來講，elk是由是由 elasticsearch logstash kibana 三部分組合而成，它們都是開源軟體。這三個軟體當中，每個軟體用於完成不同的功能，他們之間完美銜接，高效的滿足了很多場合的應用。是目前主流的一種日誌系統。elastics...