什么是 loader？，现在小编就来说说关于webpack配置第三方库按需加载?下面内容希望能帮助到你，我们来一起看看吧!
webpack配置第三方库按需加载
什么是 loader？
看官网的解释：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
下面就通过例子来演示。
向src文件夹中添加一张图片 triss.jpg：
然后修改index.js文件中的代码：
import triss from '/triss.jpg'; var img = new Image(); img.src = triss; var root = document.getElementById('root'); root.append(img);
运行 npm run bundle 来打包，会发现报错了：
错误提示说 triss.jpg 这个文件打包出了问题，这是因为 webpack 只能处理 js 文件，遇到 jpg 文件，它就懵逼了，不知道该怎么处理，然后就报错。想让它处理非 js 文件该怎么办呢？这就要用到 loader 了！
使用 loader
webpack 不知道怎么处理 jpg 文件，我们就通过配置项来告诉它怎么处理，修改 webpack.config.js 文件如下：
const path = require('path'); // 得到的path为webpack.config.js所在的目录 module.exports = { entry: { main: '/src/index.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ test: /\.(jpg|png|gif)$/, // webpack遇到.jpg|.png|.gif结尾的文件，就求助于url-loader来帮忙打包 use: { loader: 'url-loader', options: { name: '[name].[ext]', // 原文件名 原后缀 outputPath: 'images/', // 输出路径为 dist目录下的images目录 limit: 2048 // 设置2048个字节，当图片大小超过该值，输出图片文件，当图片大小小于该值，以base64编码的形式输出图片 } } }] }, mode: 'development' }
新增一个 module，配置规则 rules，写法是固定的，可查看官网文档。这里使用 url-loader 来打包图片文件，具体的配置看代码注释，写好配置规则之后，安装 url-loader：
npm install url-loader -D
接着运行命令执行打包，就会看到在 dist 目录下创建了一个 images 目录，triss.jpg 也被打包了进来：
打开 index.html 查看：
可以看到，图片正确的显示出来了，到此为止，这一个使用loader的列子就成功了。
