webpack 基礎使用

  距離上次學習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的模組化語法轉換成瀏覽器能識別的語法。
• 打包成功結果圖：
  
  
  

2. 生產環境指令：

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程式碼。