码迷,mamicode.com
首页 > Web开发 > 详细

webpack简单使用

时间:2017-01-17 21:10:17      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:char   type   exp   document   log   title   put   conf   load   

首先拷进package.json文件(用npm init命令配置,导入模块时加 --save),安装配置文件

技术分享

编写webpack.config.js配置

var webpack = require("webpack");
module.exports={
    entry:"./entry.js",
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
    module:{
        loaders:[{
            test:/\.css$/,loader:"style!css"//css文件
        }]
    }
}

编写entry.js入口:

require("!style!css!./style.css");
function calc(a,b){
    var plus = require("./plus.js");
    var sum = require("./sum.js");
    return sum(sum(a,b),plus(a,b))
}
document.write("The result is   ");
document.write(calc(2,3));

编写sum.js plus.js css:

function sum(a,b){
    return a+b;
}
module.exports=sum;
function plus(a,b){
    return a+2+b;
}
module.exports=plus;
body{
    background-color: #ffffff;
}

编写html,bundle.js在运行webpack命令会出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

运行webpack命令后打开index

技术分享

 

webpack简单使用

标签:char   type   exp   document   log   title   put   conf   load   

原文地址:http://www.cnblogs.com/rlann/p/6294318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!