webpack常用loader和plugin

Myth丶恋晨 2021-09-09 04:44 346阅读 0赞

# webpack常用loader和plugin #

## file-loader ##

file-loader: 生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径\\

//file-loader
    function loader(source){ 
    	// source：文件内容（图片内容 buffer）
    	// 1. 生成一个具有相同文件内容的文件到输出目录
    	// 2. 返回一段代码 export default "文件名"
    }

## url-loader ##

url-loader：包含了file-loader的功能，limit之内的文件，会将依赖的文件转换为：导出一个base64格式的字符串；超出的限制会走file-loader

module：{ 
        rules：[
            {  test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
            use: [{ 
            loader:'url-loader',
            options:{ 
                limit:8192,//限制打包图片的大小：
                //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
                name:'images/[name]-[hash:8].[ext]',//images:图片打包的文件夹；
                //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
                //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
            }
            }]}
        ]
    }

## publicPath (解决路径问题) ##

在使用file-loader或url-loader时，可能会遇到一个非常有趣的问题

比如，通过webpack打包的目录结构如下：

这种问题发生的根本原因：模块中的路径来自于某个loader或plugin，当产生路径时，loader或plugin只有相对于dist目录的路径，并不知道该路径将在哪个资源中使用，从而无法确定最终正确的路径

面对这种情况，需要依靠webpack的配置publicPath解决;

# webpack内置插件 #

所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象

const webpack = require("webpack")
    new webpack.插件名(options)

## DefinePlugin ##

全局常量定义插件，使用该插件通常定义一些常量值，例如：

new webpack.DefinePlugin({ 
        PI: `Math.PI`, // PI = Math.PI
        VERSION: `"1.0.0"`, // VERSION = "1.0.0"
        DOMAIN: JSON.stringify("duyi.com")
    })

这样一来，在源码中，我们可以直接使用插件中提供的常量，当webpack编译完成后，会自动替换为常量的值

## BannerPlugin ##

它可以为每个chunk生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息

new webpack.BannerPlugin({ 
      banner: ` hash:[hash] chunkhash:[chunkhash] name:[name] author:yuanjin corporation:duyi `
    })

## ProvidePlugin ##

自动加载模块，而不必到处 import 或 require

new webpack.ProvidePlugin({ 
      $: 'jquery',
      _: 'lodash'
    })

然后在我们任意源码中：

$('#item'); // <= 起作用
    _.drop([1, 2, 3], 2); // <= 起作用