配置loader,通过加载器处理文件，例如css sass less等，告诉webpack每一种文件都需要使用什么来加载器来处理。

1.node.js安装好之后也会自动默认安装好npm，所以cmd cd进入当前项目下输入npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev命令下载这些包。

2.修改webpack.config.js文件，将加载器引入

module.exports = {

    entry :  './src/js/entry.js',

    output : {

        filename : 'index.js',

        path : __dirname + '/out'

    },

    module : {

        rules: [

            {test: /.js$/, use: ['babel-loader']},

            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/

            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/

            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/

            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/

        ]

    },

    }

3.在项目文件夹下的src文件夹下的css文件下创建index.css，并且修改index.html文件

//index.css

.demo1 {

    width: 100px;

    height: 100px;

    background: red;

}

.demo2 {

    width: 200px;

    height: 200px;

    background: orange;

}
//index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>text</title>

</head>

<body>

<div class="demo1"></div>

<div class="demo2"></div>

<script src="./out/index.js"></script>

</body>

</html>

因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.

//entry.js

require('../css/index.css');//引入css文件

console.log("1234");

　　打包webpack一下看看效果

4.引用多个js文件

在src文件下新建tool.js文件

//tool.js

var tool = {//获取DOM元素

    getDom: function(className) {

        return document.getElementsByClassName(className)[];

    }

}

module.exports = tool;//模块出口

src的js下创建一个demo1.js文件, demo2.js同理

var obj = require('./tool.js');

    var demo1 = {

    init: function() {

        this.bindEvent();

    },

    bindEvent: function() {

        //var demo1 = document.getElementsByClassName('demo1')[0];

        var demo1 = obj.getDom('demo1');

        demo1.onclick = this.changeStyle;

    },

    changeStyle: function() {

        this.style.width = '200px';

        this.style.height = '200px';

        this.style.background = 'green';

        console.log('');

    }

}

module.exports = demo1;

修改入口文件entry.js

require('../css/index.css');

var demo1 = require('../js/demo1.js');

var demo2 = require('../js/demo2.js');

    demo1.init();

    demo2.init();

webpack一下, 看看效果

webpack loader加载器的更多相关文章

  1. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  2. Loader加载器

    今天学到了这个Loader,浅谈一下自己的看法: 1.定义 Loader是一个加载器,可以用来它访问数据,可以看做访问数据的机器(好比挖掘机).装再器从android3.0开始引进,它使得在activ ...

  3. webpack常用加载器和插件

    css文件加载器: style-loader,css-loader,sass-loader,less-loader //style和css加载器必须放在一起使用,且style必须放前面(style!c ...

  4. Webpack模块加载器

    一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...

  5. Webpack的加载器

    一.什么是加载器(loaders)loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用load ...

  6. 恶意软件开发——编写第一个Loader加载器

    一.什么是shellcode loader? 上一篇文章说了,我们说到了什么是shellcode,为了使我们的shellcode加载到内存并执行,我们需要shellcode加载器,也就是我们的shel ...

  7. webpack配置常用loader加载器

    webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpac ...

  8. Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件

    Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...

  9. AMD加载器实现笔记（三）

    上一篇文章中我们为config添加了baseUrl和packages的支持,那么这篇文章中将会看到对shim与paths的支持. 要添加shim与paths,第一要务当然是了解他们的语义与用法.先来看 ...

随机推荐

  1. 【Salvation】——关卡功能&数据库基础实现

    写在前面:项目的关卡功能和数据库基础实现是小组其他成员实现的部分,这里作为学习总结.关卡功能块使用C#语言编写脚本,在Unity3D游戏引擎的环境中实现,数据库功能块使用PHP作为服务端获取MySQL ...

  2. js判断值为null

    今天在做项目的时候,犯了一个着实不应该的错误,拿到data为null,然后判断如果为null执行A,否则执行B 我错误的代码是 if(data===null){ A; }else{ B; } 怎么调试 ...

  3. IT连创业系列：说说苹果商店AppStore上架App应用前后遇到的那些神坑

    前言: IT连创业的这个系列,又隔空了一个多月了. 不知道为什么,最近写文的冲动感下降了很多,如果不是因为特别忙,大概就因为上了年纪的原因了. 群里关注我创业的朋友,一直都在问,啥时候有新的文章讲述创 ...

  4. 数据模型（LP32 ILP32 LP64 LLP64 ILP64 ）

    数据模型(LP32 ILP32 LP64 LLP64 ILP64 ) 32位环境涉及"ILP32"数据模型,是因为C数据类型为32位的int.long.指针.而64位环境使用不同的 ...

  5. 前端安全之CSRF攻击

    前端安全之CSRF攻击 转载请注明出处:unclekeith: 前端安全之CSRF攻击 CSRF定义 CSRF,即(Cross-site request forgery), 中文名为跨站请求伪造.是一 ...

  6. XML学习笔记之XML的简介

    最近,自学了一段时间xml,希望通过学习笔记的整理能够巩固一下知识点,也希望把知识分享给你们(描红字段为重点): XML(extensible Markup language):可扩展的标记语言,解决 ...

  7. CLR Via C#: 类型基础

    所有类型都从System.Object派生 一下两个类型定义是完全一致的 class Employee { } class Employee : System.Object { } 由于所有类型最终都 ...

  8. robotframework自动化系列：随机下拉框

    robotframework自动化系列:随机下拉框 随着项目自动化不断推进,在下拉框定位的时候出现些问题,每次下拉框选择都是相同的下拉选项,如果想每次选择的选项不一样,该如何实现呢,查找了很多资料,没 ...

  9. 一起写框架-Ioc内核容器的实现-基础功能-ComponentScan支持组件注解限制（七）

    实现功能 以上的代码我们发现.我们都是将@ComponentScan扫描的路径下的所有类都加载到容器中的. 而实际需求,我们并不希望所有的类都创建对象,而是加了组件注解@Controller,@Ser ...

  10. NoSQL：redis缓存数据库

    一 Redis介绍 Redis和Memcached类似,也属于key-value nosql 数据库 Redis官网redis.io, 当前最新稳定版4.0.1 和Memcached类似,它支持存储的 ...