Webpack

學習筆記

rouoxo 2022-03-11 14:41:36 ‧ 1200 瀏覽

分享至

1. 安裝 Webpack環境

(1) 專案初始化

-y 預設

npm init -y

(2) 安裝 Webpack 環境

https://webpack.js.org/concepts/#entry
--save-dev 開發環境
安裝 webpack 及 webpack-cli

npm install webpack webpack-cli --save-dev

2. 進入點(entry)、輸出點(output)

(1) 建立資料夾src為 entry

(2) 建立資料夾dist為 output
(3)src內資料，藉由webpack編譯，輸出dist內資料(壓縮後)

npm run build

3. webpack.config.js 環境建立

將 entry 及 output 自定義
https://webpack.js.org/concepts/#output

webpack.config.js

module.exports = {
  entry: "./src/index.js",
  output: {
    // path.resolve 轉絕對路徑
    // __dirname 當前資料夾
    path: path.resolve(__dirname, "dist"), // 輸出資料夾
    filename: "bundle.js", // 輸出檔案名稱
  },
};

編譯

npm run build

4.NPM script

下指令獨立執行js檔案

package.json

  "scripts": {
    "hihi":"node hello.js"
  },

npm run hihi

5. development開發模式、production上線模式 mode 切換

package.json

  "scripts": {
    "dev":"webpack --mode development",
    "deploy":"webpack --mode production"
  },

development開發模式（較仔細）

npm run dev

production上線模式（壓縮）

npm run deploy

6. webpack import 載入流程

arc > c.js

    export default 333;

scr > index

    import c from './c.js'
    console.log(c);

package.json

  "scripts": {
    "dev":"webpack --mode development",
    "deploy":"webpack --mode production"
  },

production上線模式（壓縮）

npm run deploy

結果：

7.加入 index.html 顯示 bundle.js 結果（加入js檔）

原始 bundle.js

新增 index.html

src > index.html

<body>
    <h1>標題</h1>
    <script src="./bundle.js"></script>
</body>

開啟檔案，有載入bundle.js

8.載入 CSS-loader 流程（加入css檔）

(1) 安裝 CSS-loaderr 及 style-loader 套件

https://github.com/webpack-contrib/css-loader

npm install --save-dev css-loader
npm install style-loader --save-dev

(2) 編輯設定檔 webpack.config.js

https://github.com/webpack-contrib/css-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"], //順序不可變更 編譯會出錯
      },
    ],
  },
};

(3) 新增css檔

src > style.css

h1{
    color: red;
}

(4) 引用css

src > index.js

import css from './style.css'

(5) 編譯

npm run deploy

成功

9.安裝並載入 Sass-loader 套件流程

https://github.com/webpack-contrib/sass-loader

(1) 安裝 Sass-loader 套件

npm install sass-loader sass --save-dev

(2) 編輯設定檔 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

(3) 引入

import "./style.scss";

亦可引入app.js（此處引入index.js）

(4) 被引入檔案

src > style.scss

$body-color: rgba(255, 153, 0, 0.527);

body {
  background-color: $body-color;
}

(5) 編譯

npm run deploy

成功

用scss就不可以用css，否則會出錯

10. 載入 webpack-dev-server 測試伺服器

開啟一個伺服器，即時更新資料，就不用一直npm run
https://github.com/webpack/webpack-dev-server

(1) 安裝 webpack-dev-server 套件

npm install webpack-dev-server --save-dev

(2) 編輯設定檔 webpack.config.js

https://webpack.js.org/configuration/dev-server/

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'), // 輸出路徑是哪個資料夾
    },
    compress: true,
    port: 9000,
  },
};

(3) 變更執行指令 package.json

 "scripts": {
    "dev": "webpack serve --mode development",
  },

(4) 使用語法，執行npm run dev時讓伺服器自己跳出網頁

編輯設定檔 webpack.config.js
增加 open:true,

  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'), // 輸出路徑是哪個資料夾
    },
    compress: true,
    port: 9000,
    open:true,
  },

(5) 編譯

npm run dev

成功
http://localhost:9000/

11. 載入第三方套件 axios - 以 import 為例

https://www.npmjs.com/package/axios

(1) 安裝 axios 套件

npm install webpack-dev-server --save-dev

(2) 匯入axios

src > index.js

    import axios from "axios";

(3) 使用axios

src > index.js

import axios from "axios";

axios.get("https://hexschool.github.io/ajaxHomework/data.json").then(function(response){console.log(response);})

(4) 編譯

npm run dev

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

居然解出來了

iT邦好手 1 級 ‧ 2022-03-13 00:45:42

太厲害了
同步加碼Webpack
不過最近因為 Vite 的出現
有可能 Webpack 會成為歷史

回應 3
檢舉

rouoxo iT邦新手 3 級 ‧ 2022-03-13 23:37:52 檢舉

感謝前輩不嫌棄並且告知新資訊~~
可以順帶請教一下那個紅字是怎麼弄出來的嗎XD

居然解出來了 iT邦好手 1 級 ‧ 2022-03-14 17:44:59 檢舉

你可以用 ` 把文字包住
就會變紅色的了

rouoxo iT邦新手 3 級 ‧ 2022-03-15 11:57:11 檢舉

謝謝～

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22198 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

Webpack

1. 安裝 Webpack環境

(1) 專案初始化

(2) 安裝 Webpack 環境

2. 進入點(entry)、輸出點(output)

3. webpack.config.js 環境建立

4.NPM script

5. development開發模式、production上線模式 mode 切換

development開發模式（較仔細）

production上線模式（壓縮）

6. webpack import 載入流程

arc > c.js

scr > index

package.json

production上線模式（壓縮）

結果：

7.加入 index.html 顯示 bundle.js 結果（加入js檔）

原始 bundle.js

新增 index.html

開啟檔案，有載入bundle.js

8.載入 CSS-loader 流程（加入css檔）

(1) 安裝 CSS-loaderr 及 style-loader 套件

(2) 編輯設定檔 webpack.config.js

(3) 新增css檔

(4) 引用css

(5) 編譯

9.安裝並載入 Sass-loader 套件流程

(1) 安裝 Sass-loader 套件

(2) 編輯設定檔 webpack.config.js

(3) 引入

(4) 被引入檔案

(5) 編譯

10. 載入 webpack-dev-server 測試伺服器

(1) 安裝 webpack-dev-server 套件

(2) 編輯設定檔 webpack.config.js

(3) 變更執行指令 package.json

(4) 使用語法，執行npm run dev時讓伺服器自己跳出網頁

(5) 編譯

11. 載入第三方套件 axios - 以 import 為例

(1) 安裝 axios 套件

(2) 匯入axios

(3) 使用axios

(4) 編譯

1 則留言

我要留言

標記使用者