手动开发一个loader

loader—Webpack 的四大核心之一

Webpack 的四大核心：
entry：入口源文件
output：生成文件
loader：对文件进行处理
plugins：插件，比 loader 更强大，能使用更多 webpack 的 api

loader的作用

webpack本身只能打包Javascript文件，对于其他资源例如 css，图片，或者其他的语法集比如jsx，是没有办法加载的。 这就需要对应的loader将资源转化再加载进来。loader 让 webpack 能够去处理那些非 javaScript 文件，转换为 webpack 能够处理的有效模块。

手动开发一个loader

需求：手写一个 loader，将 ‘ha’ 转换成 ‘哈哈哈’。这里只是举个栗子讲解方法。

第一步：编写loader

在根目录下，新建目录 my-loader 作为我们编写 loader 的名称，执行 npm init -y 命令，新建一个模块化项目，然后新建 index.js 文件，代码如下：

module.exports = function(content) {
  return content && content.replace(/ha/gi, '哈哈哈')
}

第二步：注册模块

正常情况下我们安装的 loader 是从 npm 下载安装，但是我们可以在 loader 目录底下使用 npm link 命令在不发布模块的情况下，将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下，这样项目可以直接使用本地的 npm 模块。
在项目根目录执行以下命令，将注册到全局的本地 npm 模块链接到项目的 node_modules 下。注册成功后，我们可以在 node_modules 目录下能查找到对应的 loader啦。

$ npm link my-loader

第三步：配置 loader

情况一：webpack配置：

使用webpack打包的童鞋在 webpack.base.conf.js 加上如下配置即可

{
  test:/\.js/,
  loader: 'my-loader'
}

情况二：umi中的webpack配置

通过 webpack-chain 的 API 扩展或修改 webpack 配置。
注意：在配置config的时候，.use() 与 .loader()的路径至关重要！请根据项目实际路径更换。
我的配置文件.umirc.js和my-loader文件夹是在文件根目录下；

import path from 'path';
const config: IConfig =  {
...
chainWebpack(config) {
    config.module
      .rule('my-loader')
      .test(/\.js$/)
      .exclude.add([path.resolve('../src/pages/.umi'), path.resolve('node_modules')])
      .end()
      .use('./my-loader/index')
      .loader(path.join(__dirname, './my-loader/index'));
  },
}
export default config;

此时，我们在所有 js 文件下书写的 ‘ha’ 就全部替换成 '哈哈哈’了。