【webpack】 初次使用

webpack是一个打包工具

 

首先安装环境

 

1、创建一个空项目

【webpack】 初次使用

 

2、用IDEA打开(open)

 

3、创建modules文件夹,并在里面创建hello.js文件

【webpack】 初次使用

hello.js

//暴露一个方法
exports.sayHi = function () {
    document.write('<h1>Hello</h1>')
};

然后创建main.js

var hello = require("./hello");

hello.sayHi();

 

4、创建webpack.config.js文件

【webpack】 初次使用

module.exports={
    entry:'./modules/main.js',
    output:{
        filename:"./js/bundle.js"
    }
};

 

然后在下面的终端输入命令:webpack

【webpack】 初次使用

此时,项目会多出一个文件夹dist

【webpack】 初次使用

 

4、创建index.html文件,里面引入dist/js/bundle.js

【webpack】 初次使用

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

</body>
</html>

此时就可以打开网页观察结果了

【webpack】 初次使用

【webpack】 初次使用

 

上一篇:go语言第九课时


下一篇:Java反射