[FE201] 前端中階：那些前端會用到的工具們 筆記

[iamvince24]

這邊是 [FE201] 前端中階：那些前端會用到的工具們 的筆記。

[iamvince24]

打包程式碼必備 bundler：Webpack

為什麼需要 webpack？

• webpack is a module bundler.
• 網頁上的 JS vs Node.js
  • 不同的模組化規範
    • CommonJS, AMD, UMD 就像個家牌子的充電線
  • 其實瀏覽器原生也支援了 import, export 叫做 ES Modules
• 為了要在瀏覽器上可以執行想要跑的功能，讓你把各種資源(modules)包在一起

webpack 簡介

Basic Setup

First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli (the tool used to run webpack on the command line):

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

• npx webpack
  • 啟用 webpack 來打包
  • 會把東西放到 dist
    • distribution
    • main.js
    • 把第八行 src 改成 “dist/main.js”(引入檔案)

     - webpack幫我們在瀏覽器實作 `require` 這個功能。
  - Js beautify → website
     - 可以看到模組程式碼

• 預設的檔名 webpack.config.js
  • webpack.config.js

const path = require('path');

module.exports = {
  mode: ''
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

• entry
  • 程式的入口點
    • output
      • 檔案名
      • 路徑
      • —-dirname
        • 可以抓到現在在執行的資料夾
      • (__dirname, ‘dist’) 這個資料夾底下的資料夾 dist
    • mode
      • production
      • 正式環境的版本
      • development
      • 開發用的模式
      • 比較看得懂的樣子

• package.json

  "scripts": {
  "build": "webpack",
  },

  • 可以在使用 npm run build 時可以使用

繼續探索 webpack

• 除了可以打包自己的程式碼之外，也可以打包 node Module
  • jquery
    • npm install jquery —save-dev
    • 寫一段 jquery 的程式碼
    • npm run build
  • 可以用外來的東西，且若東西很多，可以分散在各地。
    • 利用檔案概念來管理。

• loader Loaders | webpack

  • 可以決定要載入怎麼樣的檔案格式。
    • css-loader css-loader | webpack

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

     - 檔案內

import css from "file.css";

        - **webpack.config.js**

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

• 對所有 .css 結尾的檔案，我要套用 style-loader, css-loader ，並把檔案載入。
  • 加入一個 style.css 檔案，寫入一些 style 後，執行 npm run build。
    • 把 CSS 內容當作一個字串，透過 JS 的方式把字串動態地放到