N4_Webpack 介紹、使用

[FE201]_打包程式碼必備 bundler：Webpack

為什麼需要 webpack？

瀏覽器不支援的格式，都可以用工具轉換再用，webpack 就是把模組們包在一起的工具

webpack 簡介：介紹 Webpack 基本用法

資訊都在官網 documentation 裡的 Getting start

0. 先切到專案資料夾底下，環境比較單純

1. $npm init -y

-y 是一路 yes，跳過設定直達終點，Basic Setup

2. $npm install webpack webpack-cli --save-dev

把 Webpack 裝起來！

3. 新建 src 資料夾

會被轉譯的程式碼，不會在根目錄，而是在 src 資料夾，裡面通常放 index.js 或其他你寫的檔案。

4. $npx webpack

a. webpack 找檔案自己打包，預設去 src/index.js 這裡

轉譯完的程式碼會在 dist 裡，dist: distribution （分送出去的）

b. <script src="dist/main.js"></script> 把檔案引入放到 index.html 裡，就可以在瀏覽器執行了，經過 webpack 就可以用，神奇！

c. 如果想看懂 Webpack 打包過後的程式碼，可以用 js beautify

5. 新建 webpack.config.js 新增 mode

a. 官網，config.js 是設定檔，中國叫做配置文件

b. 新增 mode，解決警告訊息

"WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/"

const path = require('path');

module.exports = {
//  沒有給 mode 的話，預設是 production(正式環境的版本，很看不懂的那種)
//  development 這種模式比較看得懂
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

6. 在 package.json 增加 build 指令

去 package.json 裡面把 build 加進去 script 裡面

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

7. $npm run build

這樣就可以執行 webpack 了

繼續探索 webpack

1. 還可以打包其他從 npm 上面裝的程式碼

a. 引用 jQuery: $npm install jquery --save-dev

可以直接用 jQuery，打包完以後一樣可以跑！

PS --save-dev 安裝後會在 package.json 的 devDependencies，只有開發用得到，打包出去不會用到

2. loader: 決定可以載入什麼樣的格式

loader $npm install --save-dev style-loader

設定 loader：在 webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

背後的原理就是自動新增一個 style 標籤，把 css 的內容，透過 js 動態插入到 html head 裡面

Webpack 最難的是 config 的調整

webpack 實戰：開發時的設定、比較複雜的 config 設定

1. babel- loader

一樣安裝，調 config 檔

2. DevServer: 開發時偵測檔案變化，自動重新載入、自動 compile

a. Using webpack-dev-server

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

改 webpack.config.js

改 package.json

接下來用 $npm run start

這裡遇到一個錯誤是，記得要在專案資料夾底下！

然後你的所有改動都會自動變化，根本太厲害！

b. 在 chrome dev tool 想要偵錯的話，可以用 source map

在 webpack.config.js 檔加這行 devtool: 'inline-source-map',

3. HtmlWebpackPlugin：插件自動產生 html

安裝 -> config const HtmlWebpackPlugin = require('html-webpack-plugin'); -> 加 plugins: [new HtmlWebpackPlugin()],

最後一步就是把 mode 改成 production，build 完就完成專案了。

Webpack 與 gulp 的差異

定位不一樣：task and bundle

gulp：管理任務器

webpack: bundler

根據場景來選擇工具，本質上完全不一樣。

小結：

要增加讀懂文件的能力

與神奇 Webpack 相遇，我像劉姥姥進大觀園

後記：

想要在 terminal 下指令，用 vs code 開啟檔案，參考 從命令列用 VSCode 開啟檔案或目錄，設定好就可以用了，爽。

上完這堂課，我莫名想要起立鼓掌。