webpack简单使用(2)---加载器

绝地灬酷狼 2022-03-14 12:04 212阅读 0赞

### 一.webpack loader加载器 ###

loader用于对模块的源代码进行转换，告诉webpack每一种文件需要用什么加载器来处理，例如loader可以告诉webpack将Typescript代码转换成Javascript，或者sass,less转成css

1.先下载css加载包

`npm install css-loader style-loader --save-dev`

2.下载完成后，接着修改webpack.config.js文件，将加载器引入，

//webpack.config.js
    module.exports={
    	mode:'development',
    	entry:'./src/js/entry.js', //页面入口文件
    	//输出文件
    	output:{
    		filename:'index.js',	//输出文件名
    		path:__dirname+'/out',	//输出文件路径
    	},
    	module:{
    		rules:[
    			{test:/\.css$/,loader:"style-loader!css-loader"}
    		]
    	}
    }

3.index.html修改如下

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    </head>
    <body>
    <div id="test">hello world</div>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <script type="text/javascript" src="out/index.js"></script>
    </body>
    </html>

4.在src文件夹中创建index.css，写点测试内容如下

/*index.css*/
    .div1{
    	width: 100px;
    	height: 200px;
    	background: green;
    }
    .div2{
    	width: 100px;
    	height: 200px;
    	background: red;
    }

5.修改entry.js

// entry.js
    require('../css/index.css'); //引入css文件
    document.write('呵呵到天亮');

6.用webpack打包看一下效果，打开index.html 文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70]

我们可以看到所添加的样式已经生效。

### 二.多个js文件 ###

当有多个js文件时，我们该怎么引入呢，这里我们用这么一个简单的例子进行说明，点击div1时，div1改变颜色，变大。

1.我们在js目录下创建一个js文件，用于编写我们的常用方法，我们命名为tools.js，内容如下

// tools.js
    var tool={
    	getDom:function(className){
    		return document.getElementsByClassName(className)[0];
    	}
    }
    module.exports=tool;

2.创建另一个js文件，命名为test1.js，内容如下

// test1.js
    var obj=require('./tool.js');
    var demo1={
    	init:function(){
    		this.bindEvent();
    	},
    	bindEvent:function(){
    		var dom=obj.getDom('div1');
    		dom.onclick=this.onClickBtn;
    	},
    	onClickBtn:function(){
    		this.style.background='yellow';
    		this.style.width=this.style.height'200px';
    	}
    }
    module.exports=demo1;

3.entry.js修改如下

// entry.js
    require('../css/index.css');
    var demo1=require('../js/test1.js');
    demo1.init();
    
    document.write('呵呵到天亮');

4.打开index.html文件，并点击div1，div1由绿变黄，宽度变大

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70]: /images/20220313/2ae38272d6604fa7b43e5a19b88f418c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 1]: /images/20220313/abd90b5ef1db4228a1ba96322b2dcea2.png