一.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修改如下
<!-- 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 文件
我们可以看到所添加的样式已经生效。
二.多个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由绿变黄，宽度变大
