3-1 Loader是什么

1. 简介

本节开始介绍Loader的概念和配置。

2. 非js文件的打包

前面说过,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),我们也看到了webpack对js文件的打包功效和基础配置。 但是,前端代码并不只有JS,还有比如html,css和图片文件等。这个时候,webpack能否成功打包呢? 我们来试一下,改写content.js如下:

// content.js
import timg from './img/timg.jpeg';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    content.src = timg;
    dom.appendChild(content);
}

运行结果如图:

image.png

可以看到./src/img/timg.jpeg这个文件打包失败,并且error中还有提示,建议尝试使用合适的loader来处理这种类型的文件。

3. 尝试使用Loader

我们按照建议尝试使用loader。对于图片文件,我们使用最普通的file-loader即可。其用法和介绍在此file-loader。 安装file-loader后,配置如下:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'file-loader'
            }
        }]
    }
};

运行后发现打包成功:

image.png

但是,打开如下目录的index.html发现:

image.png

图片没有,失败原因是404,证明src路径有误。仔细看,发现是层级的问题。因为src指定的路径是相对html所在目录径来查找的,但是此时实际的资源路径在webpackconfig.js文件中是指定的output.path中。 如图修改即可:

// content.js
import timg from './img/timg.jpeg';
import { output } from '../webpack.config'
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    console.log(output.path);
    content.src = `.${output.path}/${timg}`;
    dom.appendChild(content);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券