0

点赞

收藏

分享

webpack梳理之常用loader

水沐由之 2022-03-12 阅读 42

标签: webpack 前端 sass javascript less

常用loader目录

1.style-loader
2.css-loader
3.sass-loader
4.postcss-loader
5.babel-loader
6.ts-loader
7.html-loader
8.file-loader
9.url-loader
10.html-withimg-loader
11.vue-loader
12.eslint-loader
13.json-loader
14.script-loader
15.markdown-loader
16.cache-loader
17.less-loader
我绞尽脑汁也就想出来这么多的loader,这些loader是我以为的在项目中应该会大频率或者说有一定频率使用的loader

常用loader使用

1.style-loader

这个是和css-loader一起来编译css文件的,单独使用不知道有没有这种情况,应该没有吧,我没有遇到过,有的话好心人提醒我一下我学习学习,这个跟css-loader一起来讲

2.cas-loader

这个loader是把css文件转换成数组,这个数组就是我们的css文件被识别和转换成js类型的数据,但是我们是无法直接使用的,这个css-loader就是一个文件类型为css的文件进行转换,注意,css-loader是无法单独进行使用的,因为转换出来的值无法直接进入webpack进行打包,那么就和style-loader来一起使用

const lessLoader = {
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
      },
    }
  ],
}

style-loader一般情况使用默认的配置,也就是啥都不用配置,参数配置详情看https://www.npmjs.com/package/style-loader

3.sass-loader

sass-loader准备和less-loader一起来说一下,这两个就是转变less和sass的,配置参数也都可以选默认配置参数,这些最基础的loader一般使用参数进行配置和定制的情况并不多,所以就不多赘述,有需要在网上进行搜索,再去配也不晚

{
	test: /\.scss$/,
	use: [
		"style-loader",
		"css-loader",
		"sass-loader"
	],
	include: /src/, //include是任何loader都能配置的,说明loader只处理匹配的目录下的文件
},

4. postcss-loader

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等,又因为处理的事情有点多,可以写在options里但是有些冗余,所以说需要有一个单独的配置文件,这个配置文件就是postcss.config.js,按我的理解就是写哪都行,loader会自己去寻找的,一般卸载一级目录下边,loader的配置和上述的loader配置一样,写进去就好,重点是config的配置

module.exports = ({ env }) => ({
  plugins: [
      require("autoprefixer")({
            overrideBrowserslist: ["> 1%", "last 3 versions", "ie 8"]
       }),
       env === 'production' ? require('cssnano') : null
    ]
})

5.babel-loader

将Es6+ 语法转换为Es5语法,其中有两个比较重要的东西,就是@bable/core和@babel/preset-env,@bable/core是babel编译器核心模块@babel/preset-env 是babel官方推荐的预置器，可根据用户的环境自动添加所需的插件和补丁来编译Es6代码

{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-object-rest-spread']
        }
      }
    }

6.ts-loader

这个就不多赘述了,这个也是与css-loader一样的,对ts文件进行转换的,这种转换文件的loader都比较简单,默认配置即可

	"module": "commonjs", // 编译出的代码采用的模块规范
    "target": "es5", // 编译出的代码采用 ES 的哪个版本
    "sourceMap": true, // 输出 Source Map 方便调试
    "importHelpers": true // 减少代码的冗余，类似：@babel/plugin-transform-runtime

7.html-loader

我们有时候想引入一个html页面代码片段赋值给DOM元素内容使用，这时就用到html-loader,这个其实不是特别高频率使用,引用html的文件内容,然后赋值给dom元素,这个使用频率确实不大,而且这个我用的不多,所以了解不多,但是网上内容的查看来看也是基本配置即可

8.file-loader

-file-loader可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片,这个打包原理我看了一下,其实跟一个copy的plugin的原理差不多,其实就是赋值到出口的地方了,只不过这个有修改文件名的能力

 {
 	loader: "file-loader",
 	options: {
 		name: "[name]_[hash:8].[ext]",
 		publicPath: "image/" 
 	}
 }

0 条评论

关注