Webpack - HackMD

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>  <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>  <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/)