webpack(9)plugin插件功能的使用

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文件

webpack(9)plugin插件功能的使用

上一篇:Mssctf WEB wp


下一篇:解析Httprunner cli.py