13.Webpack
Webpack是一个JavaScript应用程序的静态模块打包器 , 当webpack处理应用程序的时候,会递归地构建一个依赖关系图,其中包含了应用程序所需要地每个模块,然后将这些模块打包为一个bundle
Webpack使用的迫切性
在前端化工程中,许多关键命令需要使用JavaScript ES6的新特性。然而许多浏览器并不支持ES6, 这个时候就需要webpack能够将ES6打包为ES5工程
Webpack安装
npm install webpack -g
npm install webpack-cli -g
webpack配置
创建wbepack.config.js
配置文件
- entry : 入口文件,指定WebPack用哪个文件作为项目的入口
- output : 输出,指定WebPack把处理完成的文件放置到指定路径
- module :模块,用于处理各种类型的文件
- plugins : 插件,如:热更新、代码重用等
- resolve : 设置路径指向
- watch : 监听,用于设置文件改动之后直接打包
使用webpack
1.创建项目
2.IDEA直接打开
3.创建为一个modules的目录,用于放置JS模块等资源文件
编写导入导出例子
//暴露一个方法 exports.'方法名'
exports.sayHi = function(){
document.writeln("<h1>webpack练习</h1>")
}
exports.he = 123;
//引入方法 require("js文件路径+名字")
var hello = require("./hello");
hello.sayHi();
hello.he;
4.开始打包
进行出入口的配置 创建webpack.config.js
module.exports = {
entry : './modules/main.js', //程序的入口
output : {
filename : './js/bundle.js'
}
};
打包
所进行的配置已经成功打包
使用打包之后的资源文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack练习</title>
</head>
<body>
<script src="dist/js/bundle.js"></script> <!--直接导入webpack打包过后的文件-->
</body>
</html>
webpack热部署
#当资源代码改变的时候,自动更新打包
webpack -watch