zoukankan      html  css  js  c++  java
  • webpack-loader

    在使用webpack的时候,总是要首先安装loader,但是为什么要安装loader?以及都有哪些类型的loader?

    1、为什么要使用loader?  

      webpack 自身只理解 JavaScript(js结尾的文件),loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

    2、日常安装的loader都有哪些?

      css-loader:会理清多个css文件之间的引用关系,最后合并为一个之后加载css文件。

      style-loader:会将css样式挂载到head的style标签中

      sass-loader:将scss文件编译为css

      file-loader: 帮助webpack打包处理一系列的图片文件;比如:.png 、 .jpg 、.jepg等格式的图片;

      babel-loader:负责将ES6、ES7代码转换成浏览器可运行的ES5的代码

    3、样例

    module: {
          rules: [
               {
                   test: /.js?$/,      // test字段表示匹配js结尾的文件
                   exclude: /(node_modules|bower_components)/,      // exclude表示排除node_modules或bower_components这些文件夹
                   loader: 'babel-loader',      // loader表示使用babel-loader
                   query: {
                      presets: ['es2015', 'react'],    // presets字段设定转码规则,根据官方提供的规则集,你可以根据需要安装
                      plugins: [            // 安装插件
                          ['import', {libraryName: 'antd', style: 'css'}]   //antd需要配置的地方
                      ]
                    }
               },
               {
                    test: /.css$/,
                    use: ['style-loader','css-loader']
                },
                {
                    test: /.(png|svg|jpg|gif)$/,
                    use: ['file-loader']
                }
           ]
     },
    

      

     
     
  • 相关阅读:
    面试题总结
    h5c3新特性
    redis常用命令大全
    windows下挂载linux的nfs网络硬盘
    mysql之char、varchar、text对比
    Lua与C的交互
    通信模型socket
    程序编译流程
    区块链共识机制(POW、POS、DPOS等)的优缺点
    .net c#获取自定义Attribute
  • 原文地址:https://www.cnblogs.com/liumcb/p/13048320.html
Copyright © 2011-2022 走看看