webpack中loader加载器(打包非js模块)

最新推荐文章于 2022-05-05 19:00:02 发布

向前有光

最新推荐文章于 2022-05-05 19:00:02 发布

阅读量292

点赞数

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

本文链接：https://blog.csdn.net/qq_40666120/article/details/106143817

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

通过loader打包非js模块
我这儿用VScode为编辑器

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非. js后缀名结
尾的模块，webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!
loader加载器可以协助webpack 打包处理特定的文件模块，比如:

less-loader可以打包处理. less相关的文件
sass- loader可以打包处理. scss相关的文件
url-loader可以打包处理 css中与url路径相关的文件
loader调试过称

打包处理css文件

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/button.js"></script>
</head>
<body>
    <ul>
        <li>这是第1个</li>
        <li>这是第2个</li>
        <li>这是第3个</li>
        <li>这是第4个</li>
        <li>这是第5个</li>
        <li>这是第6个</li>
    </ul>
</body>
</html>

然后在项目中新建css文件夹再目录下新建css文件代码

li{
    list-style: none;
}

然后在入口js中引入css
第一步：vscode终端，在项目根目录中运行 npm i style-loader css-loader -D 命令，安装处理css文件的loader

在这里插入图片描述

第二步：在 webpack.config.js的module -> rules 数组中,添加loader 规则如下:

//所有第三方文件模块的匹配规则
    module:{
       rules:[
           {test:/\.css$/,use:['style-loader','css-loader']}
       ]    
    }

其中，test表示匹配的文件类型，use 表示对应要调用的loader
注意：

use数组中指定的 loader顺序是固定的
多个loader的调用顺序是：从后往前调用的
从结果中看，上面定义的css就起效果了

打包处理less文件

第一步：vscode终端，在项目根目录中运行 npm i less-loader less -D 命令，安装处理less文件的loader

在这里插入图片描述

第二步：在webpack. config.js的module -> rules 数组中，添加loader 规则如下:

//所有第三方文件模块的匹配规则
module:{
       rules:[
           //配置css
           {test:/\.css$/,use:['style-loader','css-loader']},
           //配置less
           {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
       ]    
    }

下面我们通过一个案例来演示一下

页面原本显示
然后在项目中新建less文件

less文件代码如下：

body{
    padding:0;
    margin:0;
    ul{
        padding:0;
        margin:0;
    }
}

然后在入口js中引入less文件
vscode终端中执行 npm run start 命令打包查看结果：

可以看出调用了less文件中的css样式并去掉了外边距和内边距

打包处理scss

第一步：vscode终端，在项目根目录中运行 npm i sass-loader node-sass -D
命令，安装处理scss文件的loader

在这里插入图片描述

第二步：在webpack. config.js的module -> rules 数组中，添加loader 规则如下:

//所有第三方文件模块的匹配规则
    module:{
       rules:[
           //配置css
           {test:/\.css$/,use:['style-loader','css-loader']},
           //配置less
           {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
           //配置scss
           {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
       ]    
    }

下面我们通过一个案例来演示一下

页面原本显示

在这里插入图片描述

然后在项目中新建scss文件

scss文件代码如下：

ul{
    font-size:12px;
    li{
        line-height: 30px;
    }
}

然后在入口js中引入scss文件

在这里插入图片描述

vscode终端中执行 npm run start 命令打包查看结果：

可以看出调用了scss文件中的css样式字体大小和间距的效果

向前有光

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录