webpack(二) loader

loader

webpack可以把任意文件数据作为模块进行处理,包括:js文件,非js文件,css,图片等等,webpack在默认情况下只能操作js文件,如果想操作非js文件我们可以通过loader

什么是loader？

loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中

• 处理一个文件可以使用多个loader，loader的执行顺序是和本身的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行。
• 第一个执行的loader接收源文件内容作为参数，其他loader接收前一个执行的loader的返回值作为参数。最后执行的loader会返回此模块的JavaScript源码

loader的使用流程

以项目中添加txt文件为例

1.首先安装 raw-loader (全局安装加 -g)

npm install -D raw-loader

2.在入口文件同级创建 aa.txt文件并输入内容

3.在入口文件内引入输出

import aa from './aa.txt'
console.log(aa)

4.在webpack.config.js文件中添加配置

 module:{
   
    rules:[     //规定
      {
   
        test:/\.txt$