1. npm
- 打包工具
2.webpack
- 打包模块，也可以降级，使ES6规范，变为ES5规范，可以让浏览器识别
2.1 下载webpack包
npm install webpack -g
npm install webpack-cli -g
//查看版本
webpack -v
- 管理员权限下，运行cmd
2.2 webpack打包项目案列
- 创建项目：webpack-study
- 按照ES6规范，写js
- hello.js
/*暴露一个方法接口，可以让别人引用*/
exports.sayHello = function () {
document.write("<h1>hello,world</h1>")
}
- main.js
/*导入hello.js
1.类似java的类的概念
2.可以直接引入，使用方法，不用担心重复方法的问题*/
var hello = require("./hello");
hello.sayHello();
- webpack.config.js
module.exports = {
/*1.入口*/
entry: './modules/main.js',
output: {
/*输出到哪里*/
filename: './js/bundle.js'
}
}
-
命令行输入：webpack，打包成功
-
index.html 直接引用bundle.js即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/js/bundle.js"></script>
</body>
</html>
扫一扫
9471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
