【Webpack】基本環境建置並渲染出畫面

webpack、webpack-cli、webpack-dev-server、html-webpack-plugin

 發表於 2024-05-01  |  2 分鐘  |  395 個字

【Webpack】基本環境建置並渲染出畫面

webpack、webpack-cli、webpack-dev-server、html-webpack-plugin

 發表於 2024-05-01  |  2 分鐘  |  395 個字

Webpack5 初步環境建置

1.安裝node.js

  1. node.js版本建議要18以上(可以使用nvm版本控制)

  • 查看已安裝的node.js版本

$ nvm ls
  • 查看node.js有哪些LTS版本(較穩定)

$ nvm ls-remote --lts
  • 安裝node.js版本18.20.4

$ nvm i 18.20.4
  • 使用node.js版本18.20.4

$ nvm use 18.20.4

2.手動建立資料夾

  1. 快速建立package.json，輸入：

$ npm init -y

  1. 安裝webpack基本套件：
    • webpack是主要核心
    • webpack-cli是webpack工具包
    • webpack-dev-server是執行環境工具

$ npm i webpack webpack-cli webpack-dev-server -D

  1. 補充說明：-D 是 --save-dev的縮寫
    • 沒有加-D的套件會安裝在package.json的"dependencies"底下，表示生產環境和開發環境都會使用到，例：bootstrap。
    • 有加-D的套件會安裝在package.json的放在"devDependencies"底下，表示開發期間的工具和插件，在生產環境下不需要運行，例：webpack-cli。

you project
├─── node_modules/        
└─── package.json

3.在package.json設置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "scripts":{
      "start": "webpack --mode development", //開發模式
      "build": "webpack --mode production", //生產模式
      "dev": "webpack serve --mode development --open" //渲染模式＋自動打開瀏覽器
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  }
}

--mode development 是開發模式：編譯完成的程式碼不會壓縮檔案較大

--mode production 是生產模式：編譯完成的程式碼會自動壓縮檔案較小

webpack serve 利用暫存空間渲染畫面在伺服器

4.手動建立檔案：

  1. 建立webpack.config.js檔：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const path = require('path');

module.exports = {
    entry: './src/js/main.js', //進入點
    output: {
        path: path.resolve(__dirname,'dist'), //設置輸出檔案位置(絕對路徑)
        filename: './js/main.js', //輸出檔案名稱
        clean: true, //是否自動刪除舊檔案
    }
}

entry可用物件方式傳多一次設置多個進入點

  1. 在進入點位置手動新增main.js檔，然後在裡面寫：

1

console.log('Hello World!!')


you project
├─── node_modules/        
├─── src/
│     │
│     └─── js/ 
│           │
│           └── main.js
│ 
├─── package.json
└─── webpack.config.js

5.執行專案：

  1. 在終端機執行，就可以自動生成dist以及js/main.js檔：

$ npm run start


you project
├─── dist/
│     │
│     └─── js/ 
│           │
│           └── main.js
│  
├─── node_modules/        
├─── src/
│     │
│     └─── js/ 
│           │
│           └── main.js
│ 
├─── package.json
└─── webpack.config.js

6.建立index.html：

  1. 安裝html-webpack-plugin：

$ npm i html-webpack-plugin -D

  1. 在src資料夾底下新增index.html，並簡單就夠基本html樣板：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

  1. 在webpack.config.js檔案新增：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入套件

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: './js/main.js',
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html', //定義index.html路徑
        })
    ]
}


you project
├─── dist/
│     │
│     └─── js/ 
│           │
│           └── main.js
│  
├─── node_modules/        
├─── src/
│     │
│     ├─── index.html 
│     │
│     └─── js/ 
│           │
│           └── main.js
│ 
├─── package.json
└─── webpack.config.js

7.再次編譯最終成果：

  1. 在終端機輸入：

$ npm run start

  1. 接著再輸入：

$npm run dev

  1. 最後就能看到資料夾結構如下：

you project
├─── dist/
│     │
│     ├─── index.html 
│     │
│     └─── js/ 
│           │
│           └── main.js
│  
├─── node_modules/        
├─── src/
│     │
│     ├─── index.html 
│     │
│     └─── js/ 
│           │
│           └── main.js
│ 
├─── package.json
└─── webpack.config.js
webpack 

其他相關