webpack（3）基礎的打包過程

Silent丿丶黑羽發表於2021-07-10
Web

沒有配置檔案的打包

如果我們沒有使用配置檔案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打包成功了

相關文章