webpack扫盲——如何编写一个loader_webpack loader怎么写-优快云博客

前言

本文默认读者对前端工程化有一定的认识，对webpack有一定的裂解并且知道怎么使用webpack，本文会一步一步带领读者手动编写一个webpack的loader，以此加深对webpack的理解

loader是webpack里面一个相当重要的一个组成部分，用于将现有的代码转化成目标代码，最为人所知的就是babel，他能够将es6的代码，转化成大部分浏览器浏览器能够执行的es5代码，接下来，我们尝试着通过自己手动编写一个loader，来看清loader是什么

首先，我们确认一下我们这个简单的loader能做什么，日常中我们应该会有这样的需求，开发环境和生产环境相同的接口api地址是不同的，运行阶段我们可以通过process.env来区分不同的环境使用不同的链接，那么有没有办法在编译阶段就把这件事给做了呢，我们这个loader就可以实现这个功能

首先我们新建一个文件夹loader-example，目录结构如下

src/index.js

const content = {
  { __path__ }};
console.log(content);
document.getElementsByTagName('body')[0].innerHTML = content

package.json

{
  "name": "loader-example",
  "version": "1.0