webpack 基礎使用

小R.發表於2020-12-05
Web

  距離上次學習webpack已經幾個月了，上次只是簡單看了個視訊，很短，也不細，所以打算把尚矽谷2020最新版Webpack視訊看一遍，鞏固完善一下知識點。感興趣的可以去看我的部落格webpack 基本概念

1. 初始化package.json

npm init

2. 下載並安裝webpack

  上次學webpack安裝的是 3.5.3 版本的，這次下載個最新版本試試。（再次下載會自動覆蓋之前版本）

npm install webpack webpack-cli -g

npm install webpack webpack-cli -D

3. 建立檔案

建立 src 資料夾，建立index.js 入口檔案，程式碼如下：

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

4. 執行指令

  1. 開發環境指令：
webpack ./src/index.js -o ./build/built.js --mode=development
  • webpack會以 ./src/index.js 為入口檔案開始打包，打包後輸出到 ./build/built.js，整體打包環境，是開發環境。
  • 功能：webpack能夠編譯打包js和json檔案，並且能將es6的模組化語法轉換成瀏覽器能識別的語法。
  • 打包成功結果圖：
    在這裡插入圖片描述
    在這裡插入圖片描述
    在這裡插入圖片描述
  1. 生產環境指令：
webpack ./src/index.js -o ./build/built.js --mode=production
  • webpack會以 ./src/index.js 為入口檔案開始打包，打包後輸出到 ./build/built.js，整體打包環境，是生產環境。
  • 功能：在開發配置功能上多一個功能，壓縮程式碼。
  • 打包成功結果圖：
    在這裡插入圖片描述
    在這裡插入圖片描述
    在這裡插入圖片描述

5. 在 build 資料夾中建立 index.html 檔案，並引入打包後的資源

在這裡插入圖片描述

<script type="text/javascript" src="main.js"></script>

執行結果：
在這裡插入圖片描述

6. 建立json檔案，並在 index.js 中引入，重新打包

{
  "name": "jack",
  "age": 18
}

import data from './data.json';
console.log(data);

webpack ./src/index.js -o ./build/built.js --mode=development

打包結果：
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
可見，可以打包json檔案。

7. 建立 index.css 檔案，並在 index.js 中引入，重新打包

html,
body {
  height: 100%;
  background-color: pink;
}

import './index.css';

webpack ./src/index.js -o ./build/built.js --mode=development

打包結果：
在這裡插入圖片描述
打包失敗。

8. 結論

  • webpack能處理js/json資源，不能處理css/img等其他資源
  • 生產環境和開發環境將ES6模組化編譯成瀏覽器能識別的模組化
  • 生產環境比開發環境多一個壓縮js程式碼。

相關文章