webpack（9）plugin外掛功能的使用

Silent丿丶黑羽發表於2021-07-13
WebPlugin

plugin

外掛是 webpack 的支柱功能。webpack 自身也是構建於你在 webpack 配置中用到的相同的外掛系統之上！
外掛目的在於解決 loader 無法實現的其他事。
 

常用的外掛

由於外掛可以攜帶引數/選項，你必須在 webpack 配置中，向 plugins 屬性傳入一個 new 例項，接下來我們介紹幾個常用的外掛
 

BannerPlugin

將橫幅新增到每個生成的塊的頂部。一般用於新增版權宣告

const webpack = require('webpack'); // 訪問內建的外掛
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: "dist/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.BannerPlugin("最終版權歸jkc所有")
  ],
};

最後我們進行打包，打包後的bundler.js檔案的最上方會出現如下的一行註釋

/*! 最終版權歸jkc所有 */

 

HtmlWebpackPlugin

目前我們的index.html檔案是存放在專案的根目錄，但是我們真實發布專案的時候是釋出的dist資料夾下的內容，但是dist資料夾下如果沒有index.html檔案，那麼打包的js檔案也就沒有意義了，所以我們需要將index.html打包到dist資料夾下，這個時候我們就可以使用外掛HtmlWebpackPlugin

HtmlWebpackPlugin會自動生成一個index.html檔案(可以指定模板生成)，然後將打包的js檔案自動通過script標籤插入到body中。
使用外掛前我們需要安裝外掛，命令如下：

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

安裝完成以後，我們需要在webpack中引用它，並對其進行配置

const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 匯入外掛

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: "dist/"
  },
  resolve: {
    extensions: ['.json', '.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.png/,
        type: 'asset'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  plugins: [
    // 請確保引入這個外掛！
    new VueLoaderPlugin(),
    new webpack.BannerPlugin("最終版權歸jkc所有"),
    new HtmlWebpackPlugin({ template: 'index.html' }),   // 配置外掛，並提供了自己的模板選項，這裡的index是與webpack.config.js同目錄下自定義的模板檔案
  ]
}

最後進行打包，打包後dist目錄下就會生成一個index.html檔案

相關文章