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. sklearn.preprocessing.StandardScaler数据标准化

    原文链接:https://blog.csdn.net/weixin_39175124/article/details/79463993 数据在前处理的时候,经常会涉及到数据标准化.将现有的数据通过某种 ...

  2. mybatis generator 源码修改

    项目中使用mybatis + 通用mapper,用mybatis generator生成代码时有些不方便,参考了网上的一些例子,修改mybatis genrerator的源码. 首先,下载mybati ...

  3. 小记---------关于linux 定时任务crontab

    linux的crontab定时任务    启动服务: service crond start    关闭服务:  service crond stop    重启服务:  service crond ...

  4. [ZJOI2007]时态同步 题解

    题面 这道题是一道比较水的XXOI题: 我们可以发现,反着思考题目就变为了让所有叶子节点同时发出信号,然后这些信号同时到达根节点: 可以证明,这样答案不会改变: 那么我们可以自下而上dfs(),设f[ ...

  5. http://www.pythontutor.com/visualize.html#mode=edit python在线检测代码

    http://www.pythontutor.com/visualize.html#mode=edit

  6. goods商品类

  7. thinkphp5 安装

    thinkphp 5开始可以使用composer安装 所以在安装thinkphp5.1之前,我们先安装composer ,下载地址:https://www.phpcomposer.com/ 安装完co ...

  8. js 类型转变

    在绝大部分情况下,操作符和函数可以自动将一个值转换成正确的数据类型.这被称为"类型转变(type conversion)". 举个例子,alert 自动转变任何类型的参数为字符串类 ...

  9. Python基础——函数进阶

    等待更新…………………… 后面再写

  10. ubuntu apache https设置

    上篇文章已经描述过怎么生成证书,点击这里,直接写怎么设置 1.apache加载ssl模块, # a2enmod ssl 2.启动ssl站点 #a2ensite default-ssl 3.加入监听端口 ...