前端專案的SOP — git、webpack 教學

稍微整理一下網路上查到的webpack 教學文章，在學習完前端的基礎之後，也學到了不找製作專案時會使用到的工具，諸如git、webpack等等，所以想整理一下開發一個專案時，使用這些工具的SOP。

首先第一步，先將專案加入到git 版本控管之中，方便自己隨時回到某個版本，或是與他人多人協作。

1. 將專案加入git 版本控管

1.1 打開終端機，cd到專案資料夾

$ cd /d/OneDrive/0前端筆記/Project_SOP

1.2 初始化專案

使用git init初始化專案，才可以開始使用git指令。

$ git init

1.3 建立一個index.html

建立一個index.html，有東西變更才可以做第一次的版本控管。

$ touch index.html

1.4 將專案內的變更放到暫存區

$ git add --all

1.5 查看git目前狀態

$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   index.html

1.6 將暫存區的變更移至儲存庫

-m後面要放commit的訊息，記得一定要輸入才能commit。

$ git commit -m "first commit"
[master (root-commit) 9d70ab8] first commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 index.html

1.7 用git log查看commit記錄及詳細資訊

$ git log
commit 9d70ab8975066114c5d0c39f6006aae3d4e86d7a (HEAD -> master)
Author: jimmy2952 <[email protected]>
Date:   Wed Aug 26 09:12:13 2020 +0800

    first commit

1.8 登入GitHub帳號，新增一個repository

1.9 在本地端利用終端機操作遠端，並新增節點

$ git remote add origin https://github.com/jimmy2952/Project_SOP.git

1.10 將本地端的內容push到GitHub上

$ git push -u origin master
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 209 bytes | 209.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/jimmy2952/Project_SOP.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

接著就可以在VS code裡直接用git介面來做版本控管了。

1.11 新增.gitignore

由於之後會利用npm來做專案的套件管理，所以專案內的node_modules不需要放到版本控管理面，因此我們需要新增一個.gitignore檔案，將不需要git的檔名寫在裡面：

//.gitignore
/node_modules

2. webpack 教學

根據官方的文件，webpack是一個module bundler，也就是所謂的模組整合工具，webpack主要有以下的功能：

將專案的js打包成一個js檔案
將css和js檔案壓縮
用ES6以上的語法編譯js
使用外掛來自動引入css、js檔

2.1 建置webpack環境

首先初始化npm

$ npm init

接著利用npm安裝webpack套件

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

新增webpack設定檔：webpack.config.js

//webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  //改為'production'則會自動壓縮檔案
  entry: './src/index.js',
  //bundle的進入點
  output: {
    path: path.resolve(__dirname, 'dist'),
    //打包後的檔案位置，以此為例會放在名為dist的資料夾
    filename: 'static/js/[name].[hash].js'
    //打包後的檔案名稱
  }
};

這邊要注意的是，mode預設是’production’，webpack會自動將檔案壓縮，因此看到打包的檔案會是經過替換過後的變數與一些看不太懂得語法，如果把mode改為’development’開發模式，就可以看到原本的變數和語法了。

一般而言，在專案底下會有兩個資料夾，分別是src和dist，src放的是未編譯過的檔案，可能是SCSS、使用ES6語法的js檔、react等等，dist放的則是經過webpack打包或編譯過的檔案，bundle.js、min.css等等，是瀏覽器看得懂的HTML、CSS和JavaScript。

2.2 修改package.json

修改package.json，以便快速執行指令

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
},

使用「npm run build」和「npm run dev」，以便快速執行兩種不同的模式。

2.3 引入module：Babel

在開發的過程中，通常會使用到ES6以上的語法，這時候就需要Babel將我們的js檔編譯為瀏覽器可運行的版本，接下來要將Babel引入到我們的專案中。

用npm來安裝babel相關的module和loader。

$ npm install --save-dev @babel/core babel-loader @babel/preset-env

在專案的根目錄新增一個.babelrc設定檔：

{
    "presets": ["@babel/preset-env"]
}

接著修改webpack.config.js：

//webpack.config.js
module: {
    rules: [
        //所有.js檔都會用Babel編譯
        {
            test: /\.js$/i,
            exclude: /node_modules/,
            use: ['babel-loader']
        }
    ]
  }

webpack會將專案內所有的.js檔使用Babel編譯。

2.4 引入module：CSS、SCSS

CSS預處理器已是前端開發中不可或缺的工具了，接下來就來說明要如何引入最普遍使用的Sass/SCSS 以及CSS module。

用npm來安裝SCSS和CSS相關的套件。

$ npm install --save-dev css-loader style-loader
$ npm install --save-dev sass-loader dart-sass

修改webpack.config.js：

//webpack.config.js  
module: {
    rules: [
        {
            test: /\.js$/i,
            exclude: /node_modules/,
            use: ['babel-loader']
        },
        //用css loader來處理css檔案
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader']
        },
        //用sass loader來處理sass或scss檔案
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}

在webpack中loader的順序是從後到前，以sass為例，webpack會先用sass loader處理sass檔(將sass檔編譯成css檔)，再用css loader(將css檔編譯成js檔)，最後則是style loader(在DOM元件插入style標籤，再置入css樣式)，因此順序不能更改，否則會出錯。

別忘了在bundle的進入點引入css檔或scss檔：

//index.js
import './css/style.scss';

2.6 加入plugin：mini-css-extract-plugin

mini-css-extract-plugin可以幫我們壓縮css檔，並另外獨立出來。

首先安裝plugin：

 $ npm install --save-dev mini-css-extract-plugin

接著修改webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  ...
  plugins: [new MiniCssExtractPlugin({
    filename: 'static/css/[name].[hash].css',
  })],
  module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader']
        },
        {
          test: /\.css$/i,
          use: [{
            loader: MiniCssExtractPlugin.loader,
          }, 'css-loader']
        },
        {
          test: /\.s[ac]ss$/i,
          use: [{
            loader: MiniCssExtractPlugin.loader,
          }, 'css-loader', 'sass-loader']
        }
    ]
  },

}

這邊要注意，如果使用這個外掛引入css的話，就必須將style loader給拿掉，另外，我原本的寫法如下：

use: ['MiniCssExtractPlugin.loader', 'css-loader']

但卻一直error，後來改成：

use: [{
            loader: MiniCssExtractPlugin.loader,
          }, 'css-loader']

才沒問題。

2.5 加入Plugin：terser-webpack-plugin

webpack提供許多的plugin來加速開發時遇到的困難，以下提供幾個較常用的plugin引入方法。

terser-webpack-plugin可以幫我們壓縮js檔，然而webpack預設的’production’模式其實已經幫我們壓縮了js檔，加入此外掛的目的是以防webpack未來某天將預設的terser-webpack-plugin移除。

第一步，先用npm安裝plugin：

$ npm install --save-dev terser-webpack-plugin

接著修改webpack.config.js(此外掛的相關餐數可以參考官方文件)：

//webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
...
  optimization: {
    minimizer: [
      new TerserPlugin({
          terserOptions: {
              output: {
                  comments: false
              }
          },
          extractComments: false
      })
    ]
  }
}

2.7 加入Plugin：HtmlWebpackPlugin

HtmlWebpackPlugin可以自動幫我們引入靜態檔案，而不用手動引入。

$ npm install --save-dev html-webpack-plugin

修改webpack.config.js

//webpack.config.js
...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ...
  plugins: [
    ...
    new HtmlWebpackPlugin({
      template: './src/index.html',
      //使用src裡面的index.html作為模板
      filename: 'index.html',
      //處理完後的檔案名稱
    }),
  ],

如此一來，執行完npm run build後，就會在dist生成一個index.html，自動引入css檔和js檔。

2.8 加入Plugin：webpack-dev-server

使用webpack dev server的hot reload功能可以幫助你每次存檔時自動執行webpack，不用自己執行webpack指令。

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

修改package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "start": "webpack-dev-server --mode development --open --hot"
  },

現在只要執行npm run start，webpack dev server就會在你每次存檔時自動幫你執行webpack指令了！