webpack（3）基礎的打包過程

時間 2021-08-14

標籤 php html webpack es6 web ide 模塊化日誌 code 欄目 PHP 简体版

原文原文鏈接

沒有配置文件的打包

若是咱們沒有使用配置文件webpack.config.js，那麼咱們就須要經過命令來打包
php

案例

咱們首先建立一個webpackTest文件夾，而後在文件夾中再建立2個子文件夾dist和srchtml

dist：打包後的文件夾
src：源代碼文件夾

接着在src文件夾中建立4個文件，分別是info.js、main.js、mathUtils.js、index.html
info和mathUtils是模塊化的js文件，main是主入口，index是首頁，總體項目結構以下

代碼內容以下：webpack

// 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目錄下，輸入如下命令：es6

webpack ./src/main.js -o ./dist/bundle.js --mode development

./src/main.js：須要打包的文件路徑
./dist/bundle.js：須要打包到哪一個文件夾下
--mode development：打包的模式是開發者環境

結果以下

咱們會發現webpack會將打包的文件放到了咱們指定的dist目錄下

最後只須要在index.html中引入打包後的main.js便可web

<!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打包成功了ide