Hello webpack! Plugins

plugin(插件)是替webpack擴充功能的函式庫。
loaders可以讓我們引入不同類型的檔案, plugin是讓我們完成功能性的擴充或優化, 舉例來說, 有支叫做uglify的plugin可以進一步壓縮和最小化打包好的js

如何安裝?

plugin的安裝流程大同小異,第一步是在config檔中使用require引入, 第二步是在plugins區塊中使用, 最後, 使用npm install plugin-name --save-dev安裝

壓縮js - Terser

網頁程式碼長度越短, 載入的速度就越快, 達到更好的使用者體驗, 因此我們要盡可能精簡程式碼

目前的bundle.js是17kb

引入terser webpack plugin幫我們壓縮

webpack.config.js

// 新增一個plugins屬性, 接收的值為陣列
// 現在config已經有entry, output, mode, module, plugins區塊

// 在檔案的開頭先require terser

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

  // plugin 陣列
  plugins: [
    new TerserPlugin(),
  ]

安裝plugin時記得加上--save-dev, 因為只會在開發環境中用到

安裝完且使用之後, bunde.js的確變小了!

分離css

現在我們是使用js載入css, 並使用loader幫我們編譯, 編譯完後不會有一支css幫我們管理所有樣式, 所有程式碼和樣式都在bundle.js中, 隨著專案變得複雜, 樣式越來越多, bundle.js就會變得太肥。
把css抽出來做為一支獨立的檔案管理也許是個解決方法, 這樣我們的bundle.js就不會變的臃腫, 且可以同時載入多支檔案, 減少載入時間

使用MiniCssExtractPlugin

參考

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

...//其他設定

  plugins: [
    new TerserPlugin(),
    new MiniCssExtractPlugin({
		//可以指定產生的檔名
      filename: 'style.css',

    }),

  ]

//引入之後, 要對loader做一些調整
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 使用MiniCssExtractPlugin的loader取代原本style-loader
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          // sass也能使用
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      
    ]
  },

設定完再build之後, dist底下會新增一支style.css

要記得在index.html中引入這支css

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack tutorial!!!</title>
	引入打包好的css
  <link rel="stylesheet" href="./dist/style.css">
</head>

這樣就能正確呈現了!

# Webpack

Hello webpack! Plugins

如何安裝?

壓縮js - Terser

分離css

文章目錄

Your browser is out-of-date!