webpack入门到实战（二）------loader的使用

loader的概念

个人理解：一种打包方案，因为webpack只识别js文件，并不会打包其他格式的文件，通过各种loader可以去用不同方案进行打包。
官方解释：loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

事例

index.js 入口文件

import a from './a.js';
import text from './naruto.txt';
import naruto from './123NARUTO.jpg';
let div = document.createElement('h3');
let desc = document.createElement('p');
div.innerHTML = a;
desc.innerHTML = text;
var img = new Image();
img.src = naruto;
document.body.appendChild(div); 
document.body.appendChild(desc);
document.body.appendChild(img);

webpack.config.js

const path =  require('path');
module.exports = {
    entry:{
        "main": './src/main.js'
    },
    mode:"development",
    module:{
        rules:[
            {
                test: /\.(txt)$/,
                use:{
                    loader:'raw-loader'
                }
            },{
                test: /\.(png|jpe?g)$/,
                use:{
                    loader:'file-loader',
                    options: {
                        regExp: /([A-Z]+)+\.jpg$/i,
                        name: '[1]-[name].[ext]',
                        outputPath: 'static/assets/',
                        publicPath: 'static/assets/',
                    },
                }
            }
        ]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'bundles')
    }
}

这里需要注意 使用哪个loader，必须先npm install 那些loader，不然打包还是会不成功

file-loader

把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)

npm install --save-dev file-loader

rules: [
  ...,
	{
		test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
      }
    }
	}
]

占位符：https://webpack.js.org/loaders/file-loader#placeholders

Options

1.name:原来的文件名

2.outputpath: 文件的输出路径，就是打包后文件放置的位置

3.publicpath:默认值为____webpack_public_path____，一般用webpack本身配置的，如果图片是打包放到cdn，域名是https://www.cdn.com/img，那么可以配置publicPath: ‘https://www.cdn.com/img’

加载图片的链接就是：“'https://www.cdn.com/img”

4、context 默认为webpack.config.js 简单来说会影响name中的path

5.emitFile 用于设置是否生成文件，类型是 Boolean，默认值为 true。

6、regExp

{
//匹配到之后在[1]可以获取到第一个匹配的规则
regExp: /([A-Z]+)+\.jpg$/i,

name: '[1]-[name].[ext]',

}

7.postTransformPublicPath 这个文档的事例我没有运行成功，如果有大神运行成功的，希望可以教教我。

url-loader

可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚不合适。

options

limit

单位：字节，如果设置了100字节 ，小于100字节的会被打包成base64在打包的js文件，如果大于100的则不会。

fallback

类型：String 默认值：‘file-loader’

指定当目标文件的大小超过limit选项中设置的限制时使用的备用加载程序。

npm install --save-dev url-loader

rules: [
  ...,
	{
		test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
        // 小于 100 字节转成 base64 格式
        limit: 100
      }
    }
	}
]

url-loader和file-loader两个都可以用于引入图片，但是相对比较大的图片推荐使用file-loader，小的使用url-loader，但是太多小图片用url-loader打包进js的话首次加载时候会比较慢，所以根据实际场景实际使用吧。

raw-loader

在 webpack 中通过 import 方式导入文件内容，loader 并不是 webpack 内置的，所以首先要安装

npm install --save-dev raw-loader

然后在 webpack.config.js 中进行配置

module.exports = {
  ...,
  module: {
      rules: [
      {
        test: /\.(txt|md)$/,
        use: 'raw-loader'
    	}
    ]
	}
}

这样的话

import text from './naruto.txt';//text就是txt里的内容

下一节我会介绍使用css-loader和style-loader打包css文件和文字例如iconfont。