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

  • 相关阅读:
    VsCode 各场景高级调试与使用技巧
    rust type
    解决Chrome浏览器控制台请求返回值中的中文显示为乱码的问题
    js 固定时间运行任务
    rust 泛型
    根据值选择
    js reload window.onerror
    rust 个例
    rust index
    rust return impl Trait
  • 原文地址:https://www.cnblogs.com/jiakecong/p/15004756.html
Copyright © 2020-2023  润新知