webpack4.0基础（三）

最新推荐文章于 2024-10-03 19:28:55 发布

weixin_45368324

最新推荐文章于 2024-10-03 19:28:55 发布

阅读量137

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_45368324/article/details/106516035

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Loaders

https://webpack.js.org/loaders/

当 webpack 碰到不识别的模块的时候，webpack 会在配置的 module 中进行该文件解析规则的查找：
rules 就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组，每一种类型规则通过 test 选项来定义，通过正则进行匹配，通常我们会通过正则的方式来匹配文件后缀类型。如/.css$/。 use选项 针对匹配到文件类型，调用对应的 loader 进行处理

打包样式文件

处理样式的loader

安装：$ yarn add css-loader style-loader less less-loader autoprefixer postcss-loader … -D

css-loader：分析 css 模块之间的关系，并合成一个 css
给 loader 增加配置项：

rules: [
  ...,
	{
		test: /\.css$/,
    use: {
      loader: "css-loader",
      options: {
  			// 启用/禁用 url() 处理
  			url: true,
  			// 启用/禁用 @import 处理
  			import: true,
        // 启用/禁用 Sourcemap
        sourceMap: false
      }
    }
	}
]

style-loader：把 css-loader 生成的内容，用 style 标签挂载到 head 中
同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理。
less-loader：把 less语法转换成 css ，依赖 less 模块。
sass-loader：把 sass 语法转换成 css ，依赖 node-sass 模块。
postcss-loader：打包时自动添加厂商前缀，依赖 autoprefixer 模块。

$ yarn add css-loader style-loader -D
$ yarn add less less-loader -D
$ yarn add autoprefixer postcss-loader -D

案例：

src目录下
index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" class="box"></div>
</body>
</html>

index.less

@import "./common.less";
#app{
    .box;
    .center;
    font-size: 20px;
}

common.less

*{
    margin: 0;
    padding: 0;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.box{
    width: 100px;
    height: 100px;
    background-color: lightcyan;
}

使用：
webpack.config.dev.js

module.exports = {
//=>配置模块加载器LOADER
   module: {
       //=>模块规则：使用加载器（默认从右向左执行，从下向上）
       rules: [{
           test: /\.(css|less)$/i, //=>基于正则表达式匹配哪些模块需要处理
           use: [
               "style-loader", //=>把CSS插入到HEAD中
               "css-loader", //=>编译解析@import/URL()这种语法
   			"postcss-loader", //=>设置前缀
   			{
                   loader: "less-loader",
   				options: {
   				//=>加载器额外的配置
   				}
               }
           ]
       }]
   }
}

index.js

// import './index.css'
//=>CSS需要我们在入口的JS中导入后才可以使用
require('./index.less')

postcss.config.js // 在根目录下创建该文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

weixin_45368324

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录