Webpack作用：
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
简单说：是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS图片等都作为模块来处理和使用。
Webpack安装：
npm install webpack -g
npm install webpack-cli -g
测试安装成功：
webpack -v
webpack-cli -v
Webpack的配置：
创建 webpack.config.js 配置文件
- entry：入口文件，指定WebPack用哪个文件作为项目的入口
- output：输出，指定WebPack把处理完成的文件防止到指定的路径
- module：模块，用于处理各种类型的文件
- plugins：插件，如：热更新、代码重用等
- resolve：设置路径指向
- watch：监听，用于设置文件改动后直接打包
Webpack的使用：
- 创建项目，使用idea或者编程软件打开
- 创建一个名为modules的目录，用于放置JS模块等资源文件
- 在modules下创建模块文件，如hello.js，用于编写JS模块相关文件
//暴漏一个方法：sayHi
exports.sayHi = function(){
document.write("<div>say hi，大吉吉</div>");
};
- 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");//./是本目录，下面的文件
hello.sayHi();//模块化，调用hello.js里面暴漏出来的方法，必须是暴漏出来的方法，exports暴漏出来
- 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports={
//入口文件
entry:'./modules/main.js',
//输出文件，生成js文件
output:{
filename:"./js/bundle.js"
}
};
路径模块等，示例：
- 在项目目录下创建HTML页面，如index.html，导入WebPack打包后的JS文件
<html>
<head>
<mete charset="UTF-8">
<title>吉吉说hi</title>
</head>
<body>
<!--导入样式，会直接将执行sayHi方法，将标签展示出来-->
<scrity src="dist/js/bundle.js"></scrity>
</body>
</html>
- 在IDEA控制台中直接执行webpack；如果失败的话使用管理员权限运行即可！
- 运行HTML看效果
//参数 --watch 用于监听变化
修改hello.js main.js和打包配置文件，是热部署
webpack --watch
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
