loader—Webpack 的四大核心之一
Webpack 的四大核心：
entry：入口源文件
output：生成文件
loader：对文件进行处理
plugins：插件，比 loader 更强大，能使用更多 webpack 的 api
loader的作用
webpack本身只能打包Javascript文件，对于其他资源例如 css，图片，或者其他的语法集比如jsx，是没有办法加载的。 这就需要对应的loader将资源转化再加载进来。loader 让 webpack 能够去处理那些非 javaScript 文件，转换为 webpack 能够处理的有效模块。
手动开发一个loader
需求：手写一个 loader，将 ‘ha’ 转换成 ‘哈哈哈’。这里只是举个栗子讲解方法。
第一步：编写loader
module.exports = function(content) {
return content && content.replace(/ha/gi, '哈哈哈')
}
第二步：注册模块
$ npm link my-loader
第三步：配置 loader
情况一：webpack配置：
使用webpack打包的童鞋在 webpack.base.conf.js 加上如下配置即可
{
test:/\.js/,
loader: 'my-loader'
}
情况二：umi中的webpack配置
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’ 就全部替换成 '哈哈哈’了。