持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

file-loader

什么是？

处理静态资源模块
原理是把打包入口中识别出的资源模块，移动到输出目录，并且返回一个地址名称。

什么时候使用？

处理静态资源模块
场景：当我们需要模块，仅仅是从源码挪移到打包目录，就可以使用file-loader来处理，txt,svg,csv,excel,图片资源等等。
npm install file-loader -D
eg:
webpack.config.js:

module: {
   rules: [
       {
           test: /.(png|jpe?g|gif)$/,
           use: {
               loader:"file-loader",
               // options额外的配置，⽐如资源名称
               options:{
                   name:"[name]_[hash].[ext]",
                   //打包后的存放位置
                   outputPath:"images/"
               }
           }
       }
   ]
}

处理字体
css:

html:

webpack.config.js:

url-loader (file-loader加强版本)

url-loader内部使用了file-loader,所以可以处理File-loader所有的事情，但是遇到jpg格式模块，会把该图片转换成base64格式字符串，并打包到js里。对于小体积的图片比较合适，大图片不合适。
npm install url-loader -D
eg:
webpack.config.js:

Postcss-loader

是处理css的loader。
postcss是个载体，干活的都是上面的插件。postcss不能处理less,sass,只能处理css。
关于css的拓展基本90%都可以用postcss来实现。
比如想样式自动添加前缀：安装 postcss-loader和autoprefixer,前者处理css的，后者添加前缀的。
npm i postcss-loader autoprefixer -D
新建一个js文件，postcss.config.js:
webpack.config.js:

postcss.config.js:

手写一个替换源码中字符串的loader

src/index.js:

replaceLoader.js:

需要使用声明式函数，因为要用到上下文的this,用到this的数据，该函数接受一个参数sourse，是源码。
在配置文件中使用loader
webpack.config.js:

执行npm run test构建，构建成功后，会看到：

这样dist文件夹里的文件就会更新，里面的信息，关于chunk,chunks可以移步我的一篇文章解析webpack的chunk、chunks

看最后输出文件的效果：

至于为什么用npm run test就可以打包构建，构建命令是在这里面配置的：
package.json:

替换过来啦。

结尾

上面介绍了几个loader,也手写了一个简单的替换源码字符串的一个laoder,想看其他手写loader可以移步到我的另外一篇文章，手写实现Webpack中的loader, 里面手写实现了，style-loader、css-loader、less-loader , 并且也介绍了如何使用。
最后：想查看loader其他api的可以移步这里：Loader API

手写一个webpack中替换源码中字符串的loader，实操几个常用loader