plugins webpack_webpack实现原理

plugins webpack_webpack实现原理plugin插件是webpack的支柱功能。webpack自身也是构建于你在webpack配置中用到的相同的插件系统之上!插件目的在于解决loader无法实现的其他事。常用的插件

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164845.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • windows下的免费邮件服务器软件hMailServer

    公司购买了企业邮局给员工提供邮件服务,这样收发外部邮件都没有问题,但有个非常不好的地方,绝大多数邮件都是在内部互相之间转发的,结果就导致一个问题,不管这个邮件是不是发给内部的,邮件都得到外部邮件服务器上转一圈,如果邮件小还好说,有时候数MB的附件,一发一收都得占不少网络资源,一直就想找个办法,能否让发往内部的邮件不需要外部邮件服务器中转,直接局域网内部就搞定了,外部邮件通过外部服务器收发呢?当

  • json_decode详解[通俗易懂]

    json_decode详解[通俗易懂]json_decode是php5.2.0之后新增的一个PHP内置函数,其作用是对JSON 格式的字符串进行编码.json_decode的语法规则:json_decode (&#1

  • php弱类型花式绕过大全_协同过滤推荐算法代码

    php弱类型花式绕过大全_协同过滤推荐算法代码参考:https://www.leavesongs.com/PENETRATION/webshell-without-alphanum.htmlhttps://www.leavesongs.com/PENETRATION/webshell-without-alphanum-advanced.html字符串异或绕过只适用于PHP5

  • linux安装svn服务器的两种方式(转载)「建议收藏」

    linux安装svn服务器的两种方式(转载)「建议收藏」操作环境:CentOS7.264位第一种:采用压缩包安装:比如你们公司服务器上安装软件有自己的规定,一般会采用压缩包安装。第一步:SVN服务器端压缩包下载下载地址:http://mirrors.cnnic.cn/apache/subversion/我下载的是subversion-1.8.19版本,下载好的压缩包置于目录/usr/local/java/svn下(根据大家实际需要自行选择存放目录)。第二步:解压,进入解压后的文件在/usr/local/java/svn目录下执行下面两个命令:

    2022年10月17日
  • IDEA查看接口或类的继承实现关系图「建议收藏」

    IDEA查看接口或类的继承实现关系图「建议收藏」有时候看源码的时候,会经常性的把复杂类的关系搞混,下次碰到这种情况,应该从上到下把继承关系和接口理解清楚,这样看源码就会有一条主线。    1.看继承关系           右键选择Diagrams,然后显示       2.看接口的实现关系           crtl+alt+B会显示出跟这个接口有关系的类。           然后把需要的拖过来,形成树状图。(我…

  • 状态模式state_解释器模式

    状态模式state_解释器模式状态模式 State动机模式定义实例结构要点总结笔记动机在软件构建过程中,某些对象的状态如果改变,其行为也会随之而发生变化,比如文档处于只读状态,其支持的行为和读写状态支持的行为就可能不同.如何在运行时根据对象的状态来透明地更改对象的行为?而不会为对象操作和状态转换之间引入紧耦合模式定义允许一个对象在其内部状态改变时改变它的行为.从而使对象看起来似乎修改了其行为.从而使对象看起来似乎修改了其行为.从而使对象看起来似乎修改了其行为.实例朴素根据状态来执行下一步enum NetworkStat

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号