iT邦幫忙

1

webpack - 學習筆記

Ares 2019-08-27 17:25:246495 瀏覽

webpack 對現在網頁工程師幾乎是必學技能,在許多框架也看得到它的身影,但是真的要設定時又不知道該如何設定,這篇主要是在記錄小弟自己學習的心得,也希望能幫到沒接觸過的人~

webpack 是蝦米?

我們寫網頁時往往不只是寫原生的 htmlcssjs,還會用到 EJSPugSassES6 等等的預處理器或需要編譯的內容,而 webpack 主要就是將這些東西轉換成瀏覽器看得懂的語言,甚至是壓縮圖片與檔案也可透過它完成,是非常方便的工具,那麼讓我們從頭開始建立一個 webpack 吧!

建構 webpack 環境

其實 webpack 的運作相當簡單,將其安裝且設定好後,只需要不斷載入需要的模組即可

npm init

開啟新專案輸入指令,接著填入相關訊息,不想填那麼多也可以直接npm init -y,接著就會創建 package.json 檔案,此檔案非常重要,共有幾個功能

  • 記錄一開始填入的專案名稱、作者等訊息
  • 在檔案內的 scripts 可以設定指令快捷鍵
  • 紀錄安裝的套件與其版本,npm install 會依照此檔案安裝套件

安裝 webpack

依照官網安裝 webpackwebpack-cli,至於這邊的 --save 是將套件儲存至 package.json,而 -dev 則是開發環境使用的意思

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

webpack.config.js

接下來在根目錄創建 webpack.config.js 檔案,這是 webpack 的設定檔,必要的設定有 entryoutput,分別是進入點與輸出,可依照自己的專案結構做設定

// webpack.config.js

const path = require('path');
// node 中與路徑的相關套件
module.exports = {
  entry: './src/index.js',
  // 進入點,所以檔案必須與此檔案有關聯才會被編譯
  output: {
    filename: 'index.bundle.js',
    // 編譯檔案名稱
    path: path.resolve(__dirname, 'dist')
    // 編譯檔案的位置
  }
};

關聯檔案

我們這邊建立了一隻 js 檔案與一隻 scss,裡面可隨意寫一些內容,並將其載入我們的進入點,這樣執行 webpack 後就會編譯這些檔案囉,所以我們現在的專案應該長得像下面這樣
專案架構

再來將需要編譯的檔案載入進入點內

// index.js

import all from './all.js';
import './all.scss';

編譯

若全域有安裝 webpackwebpack-cli 可以直接輸入指令來執行,但這邊推薦在 package.json 中新增指令,這樣後續需要執行時就不用下落落長的指令,再來 webpack 編譯時有分為開發版本與正式版本,開發版本只進行轉譯,正式版本還會將其壓縮,另外加上 --watch 即會即時監控檔案修改

// package.json

"scripts": {
  "watch": "webpack --mode=development --watch",
  "dev": "webpack --mode=development",
  "build": "webpack --mode=production"
  // production 版本編譯時間較長,因此不建議使用 --watch
}

接下來就可以直接在終端機執行指令囉,需要執行 package.json 內的指令可使用 npm run

$ npm run build
// 執行 package.json 內的 build 指令

$ webpack --mode=production
// 若全域有安裝亦可直接輸入指令

這樣基本的 webpack 設定就完成囉,接下來只要將編譯完成的檔案載入即可

module

webpack 預設只支援低版本的 JavaScript,而 module 主要是讓 webpack 可以讀懂各種檔案,若需要編譯其他資源就需要載入對應的模組,這邊示範幾個簡單的模組載入

Babel

Babel主要能將我們高版本的 JavaScript 編譯為瀏覽器可運行的樣子

安裝套件

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

載入模組

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

Sass

要編譯 css 需要使用 css-loader,而要編譯 Sass 需要使用 sass-loader,最後使用 style-loader 將其載入到 header 中的 style 中,另外 webpack 預設會將 css 編譯成 js 檔案哦

安裝套件

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

載入模組

// webpack.config.js

module.exports = {
  module: {
    rules: [
      // 編譯 css 檔案設定
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      // 編譯 scss 檔案設定
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

optimization

這裡主要是載入優化或壓縮檔案的套件,以下是範例

terser-webpack-plugin

terser-webpack-plugin 可以幫我們壓縮 js,根據設定也可去除 console 等等

安裝套件

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

載入模組

// webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: 'all',
        terserOptions: {
          compress: {
            warnings: false,
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    ]
  }
}

plugins

顧名思義,所有的插件皆會在這裡載入,可以增加本來沒有的一些功能

mini-css-extract-plugin

mini-css-extract-plugin可以幫我們壓縮 css,並且根據設定另外產生出獨立的 css 檔案

安裝套件

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

載入模組

這邊因為要將檔案獨立出來,所以不需要用到 style-loader,記得要將其拿掉,不然會跳錯,要特別注意

// webpack.config.js

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false
    }),
  ],
  module: {
    {
      test: /\.s[ac]ss$/i,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader'
      ]
    }
  }
}

html-webpack-plugin

html-webpack-plugin,他能編譯出 html 檔案,搭配其他套件可以使用在產生靜態頁面上

安裝套件

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

載入模組

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

結語

webpack 其實並沒有想的那麼難,基本設定弄好之後,只要不斷載入需要的模組與功能即可,而現在的框架基本上都把必要的東西設定好了,我們也不需要多設定什麼,只要能在必要時載入自己所需的套件就可以收工了!


尚未有邦友留言

立即登入留言