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. nginx+keepalived（双主）

    一.环境 nginx1   192.168.40.211 nginx2   192.168.40.132 vip1     192.168.40.223  主为keep1,从为keep2 vip2   ...

  2. 2019.07.09 纪中_B

    错失AK记 2019.07.09[NOIP提高组]模拟 B 组 明明今天的题都很水,可就是没蒟蒻. 写题的时候: T0一眼高精(结果没切)T1看到2啊8啊果断转二进制观察,发现都是左移几位然后空出的位 ...

  3. vim中代码按照行对齐。

    在vim下, 用命令v, 然后移动光标,选种你的文本, 然后按下=键, 看看效果如何吧.

  4. Kibana多用户创建及角色权限控制

    1 介绍 ELK日志管理属于基础设施平台,接入多个应用系统是正常现象,如果接入多个系统的索引文件没有进行权限划分,那么很大程度会出现索引文件误处理现象,为了避免这种情况发生,多用户及权限设置必不可少. ...

  5. leetcode 75. Sort Colors （荷兰三色旗问题）

    Given an array with n objects colored red, white or blue, sort them in-place so that objects of the ...

  6. vi命令（待更新）

    第一部分: 0:光标到本行行首$:光标到本行行尾 ^:本行第一个非blank的位置g_:本行最后一个非blank的位置 a:光标后插入(insert是光标前插入字符)o:当前行后加入新行O:当前行钱加 ...

  7. myql命令行乱码问题，以及设置数据库编码

    使用命令修改数据库编码格式参见:https://www.cnblogs.com/clsn/p/8047028.html#auto_id_3 命令行乱码设置修改参见:https://www.cnblog ...

  8. python变量、对象和引用你真的明白了吗

    python变量.对象和引用你真的明白了吗 变量.对象和引用 Python不像C++,Java等语言一样,他们可以不用事先声明变量类型而直接对变量进行赋值.对Python语言来讲,对象的类型和内存都是 ...

  9. sqlite3中 timestamp使用

    timestamp使用 一. timestamp两种属性:自动初始化: 此行为只在第一次写入数据时,怎么把时间设为当前时间. (DEFAULT CURRENT_TIMESTAMP)自动更新: 此行为在 ...

  10. 位操作符：&位与、|位或、^异或、~求反、<<左移位、>>带符号右移位、>>>无符号右移位

    . 操作符 名称 实例(例中使用字节) 描述 & 位与 10101110 & 10010010 得到10000010 两个相应位上比特如果都为1,则执行 与 操作会得到1 | 位或 1 ...