webpack的loader和plugin的区别

Loader:加载器

loader是文件加载器,运行在NodeJS中,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中,将A文件进行编译形成B文件,这里操作的是文件,比如将A.scss或A.less转变为B.css,单纯的文件转换过程;

如:css-loader和style-loader模块是为了打包css的

      babel-loader和babel-core模块时为了把ES6的代码转成ES5

      url-loader和file-loader是把图片进行打包的。

plugin:插件

在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

webpack功能强大,难点在于它的配置文件,webpack4默认不需要配置文件,可以通过mode选项为webpack指定了一些默认的配置,mode分为:development/production,默认是production。

插件可以携带参数,所以在plugins属性传入new实例。

代码如下:

plugins:[   
        //对html模板进行处理,生成对应的html,引入需要的资源模块
        new HtmlWebpackPlugin({
            template:'./index.html',//模板文件,即需要打包和拷贝到build目录下的html文件
            filename:'index.html',//目标html文件
            chunks:['useperson'],//对应加载的资源,即html文件需要引入的js模块
            inject:true//资源加入到底部,把模块引入到html文件的底部
        })
  ]

loader 和 plugin 的主要区别:

  1. loader 用于加载某些资源文件。
    因为 webpack 只能理解 JavaScript 和 JSON 文件,对于其他资源例如 css,图片,或者其他的语法集,比如 jsx, coffee,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。从字面意思也能看出,loader是用于加载的,它作用于一个个文件上。
  2. plugin 用于扩展webpack的功能。
    目的在于解决loader无法实现的其他事,它直接作用于 webpack,扩展了它的功能。当然loader也是变相的扩展了 webpack ,但是它只专注于转化文件(transform)这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页