sudo npm install style loader css-loader --save--dev
sudo cnpm install --save-dev node-sass 必须用cnpm
sudo cnpm install sass-loader less-loader --save--dev 必须用cnpm
sudo cnpm install url-loader file-loader --save-dev 图片,资源文件
package.json
{
"name": "blog",
"version": "1.0.0",
"description": "",
"main": "config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.8",
"file-loader": "^1.1.6",
"less": "^2.7.3",
"node-sass": "^4.7.2",
"style-loader": "^0.16.1",
"url-loader": "^0.6.2",
"webpack": "^1.15.0"
}
}
webpack.config.js
module.exports={
entry:'./src/main.js',
/*项目绝对路径__dirname（移动别地方的时候不会出错,比如'd://project/webpack'这个时候只能记住webpack，不会前面的目录）, dist是输出文件夹*/
output:{
path:__dirname+'/dist',
filename:'bundle.js'
},
module:{
loaders:[
{
/*处理后面是.css的文件*/
test:/\.css$/,
/*处理的第三方工具,*/
loader:'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=50000&name=[path][name].[ext]'
}
]
}
}./src/calc.js
function add(x,y) {
return x+y;
}
exports.getAdd=add;
./src/main.js
var add=require('./calc.js');
require('../static/site.css');
require('../static/commit.less');
require('../static/shop.scss');
require('../fonts/mui/iconfont.css');
var v1=document.getElementById('v1');
var v2=document.getElementById('v2');
var btn=document.getElementById('btn');
var res=document.getElementById('res');
btn.onclick=function () {
var v1Val=parseFloat(v1.value);
var v2Val=parseFloat(v2.value);
res.value=add.getAdd(v1Val,v2Val);
}
./static/site.css
#res{
border:1px solid pink;
}
.banner{
background-image: url("../images/banner.jpg");
background-size: 100px 100px;
display: block;
width: 100px;
height:100px;
background-position: center center;
background-repeat: no-repeat;
}
.slider{
background-image: url("../images/slider.jpg");
background-size: 533px 180px;
display: block;
width: 533px;
height:180px;
background-position: center center;
background-repeat: no-repeat;
}./stattic/commit.less
#v1{
border: 1px solid #000;
}
.icons{
width: 100px;
float: left;
span{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
font-family: "iconfont" !important;
}
}./static/shop.scss
#v2{
border: 1px solid blue;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="banner"></div>
<input type="text" id="v1">
<input type="text" id="v2">
<input id="btn" value="=" type="button"/>
<input type="text" id="res">
<hr>
<div class="slider"></div>
<div class="icons">
<span class="icon-news"></span>
<span class="icon-homebig"></span>
<span class="icon-teacher"></span>
<span class="icon-end"></span>
</div>
</body>
</html>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dist/bundle.js"></script>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦