分享12个Webpack中常用的Loader(小结)-偶像资源网

前言

初衷：整理一些常用的loader分享给大家，方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿喷。
适合人群：前端初级开发。

style-loader

用途：用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到第一位，因为loader都是从下往上执行，最后全部编译完成挂载到style上
安装

cnpm i style-loader -D

配置
webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.css/,
    use: [\"style-loader\"]
   }
  ]
 }
}

css-loader

用途：用于识别.css文件, 处理css必须配合style-loader共同使用，只安装css-loader样式不会生效。
安装

cnpm i css-loader style-loader -D

配置
webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.css/,
    use: [
     \"style-loader\",
     \"css-loader\"
    ]
   }
  ]
 }
}

sass-loader

用途：css预处理器，我们在项目开发中经常会使用到的，编写css非常便捷，一个字 \”棒\”。
安装

cnpm i sass-loader@5.0.0 node-sass -D

配置
index.js

import \"index.scss\"

index.scss
body {
 font-size: 18px;
 background: red;
}

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.scss$/,
    use: [
     \"style-loader\",
     \"css-loader\",
     \"sass-loader\"
    ],
    include: /src/, 
   },
  ]
 }
}

postcss-loader

用途：用于补充css样式各种浏览器内核前缀，太方便了，不用我们手动写啦。
安装

cnpm i postcss-loader autoprefixer -D

配置
postcss.config.js

如果不写在该文件呢，也可以写在postcss-loader的options里面，写在该文件跟写在那里是同等的

module.exports = {
 plugins: [
  require(\"autoprefixer\")({
   overrideBrowserslist: [\"> 1%\", \"last 3 versions\", \"ie 8\"]
  })
 ]
}

属性	描述
> 1%	全球超过1%人使用的浏览器
> 5% in CN	指定国家使用率覆盖
last 2 versions	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR	火狐最新版本
Firefox > 20	指定浏览器的版本范围
not ie <=8	方向排除部分版本
Firefox 12.1	指定浏览器的兼容到指定版本

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.scss$/,
    use: [
     \"style-loader\",
     \"css-loader\",
     \"sass-loader\",
    \"postcss-loader\"
    ],
    include: /src/, 
   },
  ]
 }
}

babel-loader

用途：将Es6+ 语法转换为Es5语法。
安装

cnpm i babel-loader @babel/core @babel/preset-env -D

babel-loader 这是使babel和webpack协同工作的模块
@bable/core 这是babel编译器核心模块
@babel/preset-env 这是babel官方推荐的预置器，可根据用户的环境自动添加所需的插件和补丁来编译Es6代码

配置
webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.js$/,
    use: {
     loader: \"babel-loader\",
     options: {
      presets: [
       [\'@babel/preset-env\', { targets: \"defaults\"}]
      ]
     }
    }
   },
  ]
 }
}

ts-loader

用途：用于配置项目typescript
安装

cnpm i ts-loader typescript -D

配置
webpack.config.js
当前配置ts-loader不会生效，只是会编译识别.ts文件, 主要配置文件在tsconfig.json里

module.exports = {
 module: {
  rules: [
   {
    test: /\\.ts$/,
    use: \"ts-loader\"
   },
  ]
 }
}

tsconfig.json

{
 \"compilerOptions\": {
  \"declaration\": true,
  \"declarationMap\": true, // 开启map文件调试使用
  \"sourceMap\": true,
  \"target\": \"es5\", // 转换为Es5语法
 }
}

webpack.config.js

module.exports = {
 entry: \"./src/index.ts\",
 output: {
  path: __dirname + \"/dist\",
  filename: \"index.js\",
 },
 module: {
  rules: [
   {
    {
     test: /\\.ts$/,
     use: \"ts-loader\",
    }
   }
  ]
 }
}

html-loader

用途：我们有时候想引入一个html页面代码片段赋值给DOM元素内容使用，这时就用到html-loader
安装

cnpm i html-loader@0.5.5 -D

建议安装低版本，高版本可能会不兼容导致报错。我这里安装的是0.5.5版本
配置
index.js

import Content from \"../template.html\"

document.body.innerHTML = Content

webpack.config.js
module.exports = {
 module: {
  rules: [
   {
    test: /\\.html$/,
    use: \"html-loader\"
   }
  ]
 }
}

file-loader

用途：用于处理文件类型资源，如jpg，png等图片。返回值为publicPath为准。
安装

cnpm i file-loader -D

配置
index.js

import img from \"./pic.png\"
console.log(img) // https://www.baidu.com/pic_600eca23.png

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.(png|jpg|jpeg)$/,
    use: [
     {
      loader: \"file-loader\",
      options: {
       name: \"[name]_[hash:8].[ext]\",
       publicPath: \"https://www.baidu.com\" 
      }
     }
    ]
   }
  ]
 }
}

url-loader

用途： url-loader也是处理图片类型资源，只不过它与file-loader有一点不同，url-loader可以设置一个根据图片大小进行不同的操作，如果该图片大小大于指定的大小，则将图片进行打包资源，否则将图片转换为base64字符串合并到js文件里
安装

cnpm i url-loader -D

配置
index.js

import img from \"./pic.png\"

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.(png|jpg|jpeg)$/,
    use: [
     {
      loader: \"url-loader\",
      options: {
       name: \"[name]_[hash:8].[ext]\",
       limit: 10240, // 这里单位为(b) 10240 => 10kb
       // 这里如果小于10kb则转换为base64打包进js文件，如果大于10kb则打包到dist目录
      }
     }
    ]
   }
  ]
 }
}

html-withimg-loader

用途：我们在编译图片时，都是使用file-loader和url-loader，这两个loader都是查找js文件里的相关图片资源，但是html里面的文件不会查找所以我们html里的图片也想打包进去，这时使用html-withimg-loader
安装

cnpm i html-withimg-loader -D

配置
index.html

<!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>首页</title>
</head>
<body>
 <h4>我蛙人</h4>
 <img src=\"./src/img/pic.jpg\" alt=\"\">
</body>
</html>

webpack.config.js
如果打包出现img的src路径为[Object Module]，解决方案有

将file-loader降级到4.2.0
修改options参数esModule为false

module.exports = {
 module: {
  rules: [
   {
    test: /\\.(png|jpg|jpeg)$/,
    use: {
     loader: \"file-loader\",
     options: {
      name: \"[name]_[hash:8].[ext]\",
      publicPath: \"http://www.baidu.com\",
      esModule: false
     }
    }
   },
   {
    test: /\\.(png|jpeg|jpg)/,
    use: \"html-withimg-loader\"
   }
  ]
 }
}

vue-loader

用途：用于编译.vue文件，如我们自己搭建vue项目就可以使用vue-loader, 以下简单了解一下，这里就不多赘述啦。
安装

cnpm i vue-loader@15.7.0 vue vue-template-compiler -D

vue-loader 用于识别.vue文件
vue 不用多说，识别支持vue语法
vue-template-compiler 语法模板渲染引擎 {{}} template、 script、 style

配置
main.js

import App from \"./index.vue\"
import Vue from \'Vue\'
new Vue({
 el: \"#app\",
 render: h => h(App) 
})

index.vue

<template>
 <div class=\"index\">
 {{ msg }}
 </div>
</template>

<script>
export default {
 name: \'index\',
 data() {
 return {
  msg: \"hello 蛙人\"
 }
 },
 created() {},
 components: {},
 watch: {},
 methods: {}
}
</script>
<style scoped>

</style>

webpack.config.js

const VueLoaderPlugin = require(\'vue-loader/lib/plugin\')
module.exports = {
 entry: \"./src/main.js\",
 output: {
  path: __dirname + \"/dist\",
  filename: \"index.js\",
 },
 module: {
  rules: [
   {
    test: /\\.vue$/,
    use: \"vue-loader\"
   }
  ]
 },
 plugins: [
  new VueLoaderPlugin()
 ]
}

eslint-loader

用途：用于检查代码是否符合规范，是否存在语法错误。
安装

cnpm i eslint-loader eslint -D

配置
index.ts

var abc:any = 123;
console.log(abc)

.eslintrc.js
这里简单写几个规则

module.exports = {
 root: true, 
 env: {
  browser: true,
 },
 rules: {
  \"no-alert\": 0, // 禁止使用alert
  \"indent\": [2, 4], // 缩进风格
  \"no-unused-vars\": \"error\" // 变量声明必须使用
 }
}

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\\.ts$/,
    use: [\"eslint-loader\", \"ts-loader\"],
    enforce: \"pre\",
    exclude: /node_modules/
   },
   {
    test: /\\.ts$/,
    use: \"ts-loader\",
    exclude: /node_modules/
   }
  ]
 }
}

总结

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END