本篇简单引入webpack的文件加载器！--loader

相关文章
webpack 常用的 plugin 和 loader --- 面试题
【精选必看】webpack 自定义loader
b站视频讲解

本篇内容：了解和使用 loader 并自定义 loader

webpack只能打包 .js 文件？

1、我想给index.js文件里的 h1 标签加一个背景颜色

 document.body.insertAdjacentHTML('beforeend', '<h1>Hi,i am index.js</h1>')

2、index.css

h1{
  background: saddlebrown;
}

3、接着我们去打包： 发现打包失败.......

loader配置

module: {
  rules: [
    { 
      test: /\.css$/, 
      use: ['style-loader', 'css-loader']
    }
  ]
}

1、再次打包 发现打包成功 2、源码中（main.js) 也看到了 css 信息 3、当然还可以配置更多的类型，比如 jpg等

module: {
    rules: [
      { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpeg|jpg|png)/,
        type: 'asset/resource' // 图片类型不需要loader，已经内嵌
      }
    ]
  }

总结

loader 用于在 webpack 构建过程中处理源文件。它们是函数，接受源文件作为参数，并返回一个新的源文件。