沒有配置檔案的打包

如果我們沒有使用配置檔案webpack.config.js,那麼我們就需要通過命令來打包

案例

我們首先建立一個webpackTest資料夾,然後在資料夾中再建立2個子資料夾distsrc

  • dist:打包後的資料夾
  • src:原始碼資料夾

接著在src資料夾中建立4個檔案,分別是info.jsmain.jsmathUtils.jsindex.html

infomathUtils是模組化的js檔案,main是主入口,index是首頁,整體專案結構如下



程式碼內容如下:

  1. // info.js
  2. const height = 180;
  3. const weight = 180
  4. export {height, weight}
  1. // mathUtils.js
  2. function add(num1, num2) {
  3. return num1 + num2
  4. }
  5. function mul(num1, num2) {
  6. return num1 * num2
  7. }
  8. module.exports = {
  9. add, mul
  10. }
  1. //main.js
  2. // 1.CommonJS模組化
  3. const {add, mul} = require('./mathUtils')
  4. console.log(add(20, 30))
  5. console.log(mul(50, 80))
  6. // 2.es6模組化
  7. import {height, weight} from "./info";
  8. console.log(height)
  9. console.log(weight)

最後我們來到webpackTest目錄下,輸入以下命令:

  1. webpack ./src/main.js -o ./dist/bundle.js --mode development
  • ./src/main.js:需要打包的檔案路徑
  • ./dist/bundle.js:需要打包到哪個資料夾下
  • --mode development:打包的模式是開發者環境

結果如下



我們會發現webpack會將打包的檔案放到了我們指定的dist目錄下



最後只需要在index.html中引入打包後的main.js即可

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script src="./dist/bundle.js/main.js"></script>
  9. </body>
  10. </html>

我們訪問index首頁,檢視控制檯,就能看到我們原始碼main.js中寫的列印日誌了



說明使用webpack打包成功了