---
# System prepended metadata

title: Webpack
tags: [frontend & backend, webpack]

---

Webpack
===

###### tags: `frontend & backend`
###### tags: `frontend & backend`, `webpack`

<br>

[TOC]

<br>


## webpack version
```bash
$ webpack -v
webpack: 5.65.0
webpack-cli: 4.9.1
webpack-dev-server not installed
```

<br>

## [Loaders](https://webpack.js.org/concepts/#loaders)

<br>

## [file-loader](https://v4.webpack.js.org/loaders/file-loader/)
- ### 安裝
    ```
    $ npm install file-loader --save-dev
    ```
- ### file.js
    ```javascript=
    import img from './file.png';
    ```
- ### webpack.config.js
    ```javascript=
    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif)$/i,
            use: [
              {
                loader: 'file-loader',
              },
            ],
          },
        ],
      },
    };
    ```
- ### 執行
    ```
    $ webpack
    ```

### 參考資料
- ### [Webpack 前端打包工具 - 使用 url-loader 與 file-loader 處理靜態資源](https://awdr74100.github.io/2020-03-09-webpack-urlloader-fileloader/)
    - **url-loader 功能**
        將資源轉換為 base64 的格式
    - **轉為 base64 好處**
        網頁在渲染圖片時，不需要以 request 的方式加載圖片，直接向 JavaScript 檔案拿取即可，這樣子以效能來說，會提高許多
    - **base64 限制**
        不能把檔案大小的上限設定太高，由於 base64 是存在於 bundle.js 內，這樣子的做法會導致 JavaScript 異常的肥大，對於效能來說反而會下降
    - **file-loader 功能**
        用以將靜態資源載入到 Webpack 內，並且解析資源的相互依賴關係，最後 output 到指定的位置
    - **如何引入打包而成的 bundle.js 與 main.css？**
        ```html=
        <!-- 其他省略 -->
        <head>
          <!-- 引入打包生成的 CSS -->
          <link rel="stylesheet" href="dist/css/main.css" />
        </head>
        <body>
          <div class="banner w-100-h-100 bg-cover"></div>
          <div class="logo w-100-h-100 bg-cover"></div>
          <!-- 引入打包生成的 JavaScript -->
          <script src="dist/js/bundle.js"></script>
        </body>
        ```
    - **font 字體可以使用 url-loader 處理嗎？**
        答案是可以的，但非常不建議這樣做，英文字體少說 150 KB 起跳，而中文字體則是 5MB 起跳，對於網頁的效能來說，會有非常大的影響，這也是之前提到的 url-loader 中 limit 選項需要自己去衡量的原因，一般來說 8KB 左右就是極限了，超過的檔案就都建議以 file-loader 進行處理

### Q & A
- ### [Module not found: Error: Cannot resolve module '***.jpg'](https://stackoverflow.com/questions/42413859/)


<br>

<hr>

<br>

## ts-loader
- ### [webpack ts-loader error : loaderContext.getOptions is not a function](https://stackoverflow.com/questions/68016372)
    ```json=
    module: {
        rules: [ 
        {
            test: /\.ts$/,
            include: [source_path],
            loader: 'ts-loader',
            exclude: /node_modules/, 
        }],
    },
    ```
- ### [Error at typescript compilation with webpack](https://stackoverflow.com/questions/50634229)
    ```json=
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
          }

        ]
      }
    ```
- ### [Webpack ts-loader : change tsconfig filename](https://stackoverflow.com/questions/40426378)
    ```json=
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        configFile: "tsconfig.webpack.json"
                    }
                }],
                exclude: /node_modules/,
            }
        ]
    },
    ```
- ### [Import raw files from typescript with webpack using the `import` statement](https://coderedirect.com/questions/286685/import-raw-files-from-typescript-with-webpack-using-the-import-statement)
    ```
    $ tree
    .
    +-- file.txt
    +-- main.ts
    +-- package.json
    +-- tsconfig.json
    +-- webpack.config.js
    ```
- ### [Importing images in TypeScript React - "Cannot find module"](https://stackoverflow.com/questions/52759220/)
- ### [How to use es6 import for images](https://stackoverflow.com/questions/39458511/)


<br>

<hr>

<br>

## Q & A
- ### 更多範例
    - [TypeStrong / ts-loader / examples / vanilla](https://github.com/TypeStrong/ts-loader/tree/main/examples/vanilla) :+1: :100: 
    
- ### [Cannot find module 'webpack-cli'](https://stackoverflow.com/questions/49855472)
    ```
    $ npm i -g webpack-cli
    ```
    - `i`: [install](https://docs.npmjs.com/cli/v8/commands/npm-install)
    - `-g`: [global](https://docs.npmjs.com/cli/v8/commands/npm-install)


<br>

<hr>

<br>

## 教學資料
- ### [Webpack 前端打包工具 - 使用 url-loader 與 file-loader 處理靜態資源](https://awdr74100.github.io/2020-03-09-webpack-urlloader-fileloader/)
- ### [Webpack 簡介 :zap:](https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/)