webpack的loader加载器的使用与配置

webpack内置的加载器（loader）默认只会打包js文件，如果打包其他类型的文件的话需要安装添加不同的loader

一、webpack对css文件的处理

  1. 首先在src目录下创建一个 index.html 文件，并引入打包后的js文件

    index.js

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test title</title>
  </head>
  <body>
    <h1 class="test">hello webpack</h1>
  </body>
  <!--引入打包后的文件-->
  <script src="../optput/bundle.js"></script>
  </html>

    在src下创建一个css文件

    在css文件中随便写一些css代码

    test.css

      .test {
      font-size: 12px;
      color: #f00;
    }

    在入口文件中引入该css文件

    index.js

      import './style/test.css'
  console.log('webpack working~~')

    执行打包命令npm run build

    结果报错了，说明webpack本身不支持css的打包，需要安装配置其他loader支持打包

    css-loader

    css-loader可以打包css代码，但css-loader要结合style-loader一起使用，所以要安装style-loader和css-loader

      npm i style-loader css-loader -D

    在webpack.config.js文件中增加module属性配置

    webpack.config.js

    module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
  filename: 'bundle.js',
  path: path.join(__dirname, 'optput')
},
module: {
  /** rules加载配置规则，它是一个数组，数组里面每一项是一个对象，对应的每种类型文件的配置**/
  rules: [
    // 没个加载规则对象有两个属性配置
    {
      test: /.css$/,    // 以正则形式匹配文件类型
      use: ['style-loader', 'css-loader']    // use是配置加载中使用的loader,只有一个loader的话，配置成字符串即可，当有多个loader时，以数组形式配置，use的执行顺序是从数组                 
    }                                        // 的后面往前面执行，所以css-loader要放在style-loader后面
  ]
}
}

    再次执行打包命令 npm run build 打包成功

    可以在vscode右下角的Go live 启动一个本地服务，将项目运行在浏览器

    可以看到页面中字体已变红，说明css已经打包成功生效

二、file-loader 文件资源加载器

当项目中用到图片的时候，需要使用file-loader
同样的，首先安装file-loader

  npm i file-loader -D

然后再module选项中的rules中添加一个对象配置

module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      /**配置文件资源加载器**/
      {
        test: /.png$/,
        use: 'file-loader'
      }
    ]
  }

在入口文件中引入图片

然后执行 npm run build打包，在output目录下看到一个打包后的图片

三、url-loader

文件除了物理文件的形式存在，还可以以data urls形式存在，需要用到 url-loader

还是第一步安装 npm i url-loader -D

第二步，配置loader

rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      // {
      //   test: /.png$/,
      //   use: 'file-loader'
      // },
      {
        test: /.png$/,
        use: 'url-loader'
      }
    ]

打包后output目录下，没有生成图片文件

在入口文件中把引入的图片模块以dom形式插入页面中

然后项目启动起来在浏览器上可以看到显示的图片，并且以data urls 形式存在

需要注意到的是：文件比较小的话使用Data urls形式可以减少请求次数，大文件单独提取存放文件可以提高加载速度，这样的话需要修改loader配置

 module: {
   rules: [
     {
       test: /.css$/,
       use: ['style-loader', 'css-loader']
     },
     {
       test: /.png$/,
       // use配置改为一个对象，有loader和options属性
       use: {
         loader: 'url-loader',  // 使用的loader
         options: {             // options选项配置
           limit: 10*1024       // 10kb 文件限制的大小，小于这个大小限制的文件使用url-loader打包，否则使用file-loader打包
         }
       }
     }
   ]
 }

四、babel-loader

es6语法转为es5

安装 npm i babel-loader @babel/core @babel/preset-env -D

配置loader

  {
    test: /.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          'babel-preset-env'
        ]
      }
    }
  }

在入口js文件随便写段es6代码

打包后查看打包后的文件代码

可以看到es6语法得到转换

五、webpack加载资源的方式

1.样式文件章导入资源模块，有两种形式

① url()
当图片做为背景图的时候，我们会用到url()的形式将图片作为一个模块导入

② @import url()
样式文件以import url()形式引入

  1. html文件的img标签的src属和a标签的href属性处理

需要安装 html-loader, 执行命令 npm i html-loader -D

然后配置

{
  test: /.html$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [
        'img: src',
        'a: href'
      ]
    }
  }
}
posted @ 2021-03-12 14:04  自行車  阅读(251)  评论(0)  编辑  收藏  举报