webpack - 四（什么是loader）

什么是loader

官网：

loader用于对模块的源代码进行转换。它可以将文件从不同语言（typeScript）转化为JavaScript，或将内联图像转化为 data URL等等。（Data URL：给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中）

说白了，loader就是一个打包的方案，对于一个特定的文件，webpack如何打包呢/？这时loader上场了。

在src下的web.js中引入了一张图片

// web.js
import Header from './header.js'
import Footer from './footer.js'
const img = require('./img.jpg')
Header()
Footer()

安装file-loader

我们以打包图片为例，在webpack中图片（txt、png、gif）打包需要file-loader，

npm install file-loader -D

在webpack.config.js里的module对象中配置如下：

理解：

模块打包首先需要给它一个规则，也就是以什么样规则（rules）进行模块打包，在rules中，规则：检查（test）图片的格式是否以.jpg结尾的，如果是的话，使用（use）file-loader对图片进行打包。

const path = require('path')
module.exports = {
    entry: './web.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { // 模块打包
        rules:[{ // 打包的规则
            test:/\.jpg$/, // 打包以jpg结尾的文件
            use: {
                loader: 'file-loader'   
            }
        }]
    }
}

 

打包：

此时，dist目录下，会出现2个文件一个是打包之后的图片，一个是打包后的js文件; webpack打包图片时，它首先会把图片挪到dist文件夹下，其次，还会为图片起一个名字，默认情况下，生成的文件名就是文件内容的MD5哈希值，图片同理。

 

options

options对象是配置文件的名字及输出路径的，

1、name参数 ：为文件配置自定义的文件名模板。

值为字符串 ：String

文件名可进行自定义，name默认值是 [hash].[ext] ， 如果你不想使用默认的哈希文件名，可以在options选项中，配置如下参数：

" [name].[ext] " 意思是文件名字和扩展名与原来文件一样

const path = require('path')

module.exports = {
    mode: 'development',
    entry: './src/total.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.jpg$/,
            use: {
                loader: 'file-loader',
                options:{ // 配置选项
                    name:'[name].[ext]' // 名字和扩展名与原来的文件名一样
                }
            }
        }]
    }
}

将一个文件从上下文目录复制到保留完整目录结构的输出目录中去，可使用如下命令：

// ··· ···
loader: 'file-loader',
options: {
    name: '[path][name].[ext]'
}

 打包结果：

placeholders 占位符

上边例子中，name后边值叫做占位符，以下是webpack官方文档给出的一些占位符：

[ext]    类型：String；默认值：file.extname; 描述： 资源（文件）的扩展名。

[name]  类型：String ； 默认值： 资源（文件）原始名字；描述：资源的原始名称。

[path]  类型：String；默认值：file.dirname ；描述：资源相对于context的路径。

[hash] 类型：String；默认值：md5； 描述：内容的哈希值。

 

outputPath

outputPath参数，可以规定文件的打包目录，以上边打包图片为例，把图片打包到 images 文件夹下，可进行如下配置：

options:{
    name: '[name].[ext]',
    outputPath: 'images/'
}