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. USACO4.1 Fence Loops【最小环&边->点转化】

    数据不是很大,如果要转换为正常的那种建图方式的话,可以给点进行标号,用一个二维数组存这两条边相交的那个点的标号,方便处理.一定要注意不要同一个点使用不同的编号也不要不同的点使用同一个编号(这不是废话嘛 ...

  2. 【VS开发】cmd dos 批处理重命名文件

    原文地址:http://hi.baidu.com/benchoi/item/c1f531f5f1367b0b85d2785b 批处理实现文件批量重命名并自动加递增序列号 有时我们想把一些图片批量重命名 ...

  3. k8s-kubernettes-sercet存储

    Secret Secret存在意义 Secret解决了密码.token.密钥等敏感数据的配置问题,而不需要把这些敏感数据暴露到镜像或者Pod Spec中.Secret可以以Volume或者环境变量的方 ...

  4. 第七周作业&实验报告5

     实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. 实验要求 掌握使用抽象类的方法. 掌握使用系统接口的技术和创建自定义接口的方法. 了解 Java 系统包的结 ...

  5. 2019JAVA第十一次实验报告

    #Java实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019.11.22 评分等级 简易记事本 实验代码 package Domon10; import java.aw ...

  6. js知识点——2之navigator

    navigator(领航者) 1.appCodeName(返回浏览器的代码名) var x= navigator; document.write("CodeName:"+x.app ...

  7. AppCan打包问题

    在AppCan IDEA打包的时候出了错误, Failed reading value of registry key: Software\JavaSoft\Java Runtime Environm ...

  8. YII框架微信公众号

    <?phpnamespace backend\controllers; use yii\db\Query;use yii\web\Controller;use Yii;class Exam2Co ...

  9. Let和Const的使用

    ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const. let 声明的变量只在 let 命令所在的代码块内有效,const 声明一个只读的常量,一旦声明, ...

  10. crm---本项目的权限控制模式

    一:url权限:  最底层的权限控制,,缺点在与没有预判的机制,造成客户体验下降.           前提: 为controller中的每一个方法(即资源)定义一个资源(Resource)名称,,该 ...