webpack 基础部分配置过程.......-原创手记-慕课网

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;
}

index.html

<!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 src="dist/bundle.js"></script>

webpack 基础部分 配置过程.......