webpack(3)基礎的打包過程
阿新 • • 發佈:2021-07-10
沒有配置檔案的打包
如果我們沒有使用配置檔案webpack.config.js
,那麼我們就需要通過命令來打包
案例
我們首先建立一個webpackTest
資料夾,然後在資料夾中再建立2個子資料夾dist
和src
- dist:打包後的資料夾
- src:原始碼資料夾
接著在src
資料夾中建立4個檔案,分別是info.js
、main.js
、mathUtils.js
、index.html
info
和mathUtils
是模組化的js檔案,main
是主入口,index
是首頁,整體專案結構如下
程式碼內容如下:
// info.js const height = 180; const weight = 180 export {height, weight}
// mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add, mul
}
//main.js // 1.CommonJS模組化 const {add, mul} = require('./mathUtils') console.log(add(20, 30)) console.log(mul(50, 80)) // 2.es6模組化 import {height, weight} from "./info"; console.log(height) console.log(weight)
最後我們來到webpackTest
目錄下,輸入以下命令:
webpack ./src/main.js -o ./dist/bundle.js --mode development
./src/main.js
:需要打包的檔案路徑./dist/bundle.js
:需要打包到哪個資料夾下--mode development
:打包的模式是開發者環境
結果如下
我們會發現webpack
會將打包的檔案放到了我們指定的dist
目錄下
最後只需要在index.html
中引入打包後的main.js
即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="./dist/bundle.js/main.js"></script> </body> </html>
我們訪問index
首頁,檢視控制檯,就能看到我們原始碼main.js
中寫的列印日誌了
說明使用webpack
打包成功了