首页 > 代码库 > webpack简单使用

webpack简单使用

2024-09-01 10:53:47   214人阅读

首先拷进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简单使用


联系
我们