1、配置处理css样式表的第三方loader

　　webpack默认只能打包处理js类型的文件，无法处理非js类型的文件；要想处理*.css文件，需要手动安装一下合适的第三方loader加载器：

npm i style-loader css-loader -D

　　修改webpack.config.js

var path = require('path');

// 通过node的模块操作，向外暴露一个配置对象

module.exports = {

    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件

    output: {   // 出口

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

    },

    module: {  // 用于配置所有第三方模块加载器

        rules: [  // 所有第三方模块的匹配规则

            {

                test:/\.css$/,

                use: ['style-loader','css-loader']

            }

        ]

    }

};

　　然后，可以在main.js导入.css文件，main.js内容：

// 这是项目的入口js文件

// 导入jquery

//这是ES6中导入模块的语法

import $ from 'jquery';

import './css/common.css';

$(function() {

    $('li:odd').css('backgroundColor','yellow');

    $('li:even').css('backgroundColor','#eee');

});

　　

　　common.css内容：

.blue {

    background-color: blue;

}

　　然后，执行webpack命令，重新生成bundle.js。

2、webpack中url-loader的使用：处理css文件中引入的url地址

　　安装第三方loader加载器：

npm i url-loader file-loader -D

　　修改webpack.config.js

var path = require('path');

// 通过node的模块操作，向外暴露一个配置对象

module.exports = {

    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件

    output: {   // 出口

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

    },

    module: {  //用于配置所有第三方模块加载器

        rules: [  //所有第三方模块的匹配规则

            {

                test:/\.css$/,

                use: ['style-loader','css-loader']

            },

            {

                test:/\.(jpg|png|gif|bmp|jpeg)$/,

                use: ['url-loader']

                // limit单位byte，如果图片大于等于limit给定值，则不会被转为base64格式字符串

                // name=[name].[ext]:打包的图片原名相同

                // use: ['url-loader?limit=1000&name=[name].[ext]']



            }

        ]

    }

};

　　common.css内容：

.blue {

    background-color: blue;

}

div.img {

    width: 200px;

    height: 200px;

    background: url('../images/a.jpg');

    background-size: cover;

}

　　index.html

<!DOCTYPE html>

<html>

<head>

    <title>标题</title>

    <meta charset="utf-8">

    <script type="text/javascript" src="../dist/bundle.js"></script>

</head>

<body>

    <h3 class="blue">h3标签内的文本</h3>

    <ul>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

    </ul>

    <div class="img"></div>

</body>

</html>

webpack--第三方loader的更多相关文章

  1. Vue学习之webpack调用第三方loader(十五）

    ---恢复内容开始--- 一.webpack 默认只能打包处理 JS 类型的文件,无法处理 其他的非  JS 类型的文件: 如果非要处理 非 JS 类型的文件,我们需要手动安装一些 合适 第三方 lo ...

  2. 9 loader - 分析webpack调用第三方loader的过程

    注意:webpack处理第三方文件类型的过程: 1.发现这个要处理的文件不是JS文件,然后就去配置文件中,查找有没有对应的第三方loader规则 2.如果能找到对应的规则,就会调用对应的loader处 ...

  3. （4）webpack中配置css，scss，less第三方loader

    为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...

  4. 8 loader - 配置处理css样式表的第三方loader

    // 使用import语法,导入css样式表 import './css/index.css' // 注意:webpack,默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件: // 如果 ...

  5. webpack之loader实践

    初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...

  6. webpack之loader和plugin简介

    webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...

  7. webpack之Loader

    我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用,但同时这也是webpack的缺点,只能用于模块化开发的项目,例如:Vue,React,Angular.Webpack在进行打 ...

  8. webpack的loader和plugin的区别

    [Loader]:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转 ...

  9. 第五十六篇：webpack的loader(四) -打包js中的高级语法

    好家伙, 1.打包处理js文件中的高级语法 webpack只能打包处理一部分高级的JavaScript 语法.对于那些webpack无法处理的高级js 语法,需要借 助于 babel-loader 进 ...

  10. 第五十二篇：webpack的loader(三) -url-loader (图片的loader)

    好家伙, 1.什么是base64? 图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要 ...

随机推荐

  1. H3C版本升级

    H3C S5500和S3100都可以通过TFTP方式进行升级,1.设置交换机的vlan1的ip地址,如10.10.10.2/242.设置电脑和交换机连接的ip地址,如10.10.10.1/243.在交 ...

  2. 简述Vue中使用Vuex

    1.为什么要用vuex 在vue组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...

  3. HDU 1176 免费馅饼 （动态规划、另类数塔）

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  4. 牛客小白月赛13-H（单调栈+树状数组）

    题目链接:https://ac.nowcoder.com/acm/contest/549/H 题意:给一个柱状图,包括每个矩阵的宽度和高度,求能组成的最大矩阵的面积. 思路:显然最大矩阵的高一定为n个 ...

  5. 洛谷 P1593 因子和 题解

    题面 这道题在数学方面没什么难度: 对于每一个正整数n: 质因数分解后可以写成n=a1^k1a2^k2……*ai^ki 所求的数的因数和f(n)就等于f(n)=(1+a1+a1^2+……+a1^k1) ...

  6. 从入门到自闭之Python三大器--迭代器

    函数名的第一类对象(概述): 使用方式: 函数名可以当做值赋值给变量 def func(): print(1) print (func) #查看函数的内存地址 a = func print (a) # ...

  7. Ajax提交数据后，清空form表单

    按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...

  8. CSP-S 游记（算是AFO记 8）

    Day-1 没什么好写的,还是一道题还是能调半天的状态 Day 0 假装出去旅游,结果公交车开了三个小时,状态直接爆炸 晚上颓了一下,最后还是 10 点睡的...真的当成是旅游了吧,只有到了比赛的时候 ...

  9. FileUtils.writeByteArrayToFile方法

    FileUtil类是Apache Commons IO库里面的一个类,是与文件相关的一个辅助类,我写了一个可运行的java文件 import java.io.*; import org.apache. ...

  10. MapUtils

    一. package com.wang.utils; import java.util.HashMap; import java.util.Map; import java.util.Set; pub ...