webpack 的基本使用
1.什么是webpack
概念:webpack 是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端javascript兼容性，性能优化等强大的功能。
好处: 让程序员把工作的中心放在具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：在vue和react等前端项目，基本上都是基于webpack进行工程化开发的。
2、安装
npm install webpack -g
npm install webpack-cli -g
测试安装成功
配置
- entry:入口文件，指定webpack用哪个文件作为项目的入口
- output:输出：指定webpack把处理完成的文件放置到指定路径
- module:模块：用于处理各种类型文件
- plugins:插件：如热更新，代码重用
- resolve；设置路径指向
- watch:监听，用于设置文件改动后直接打包
创建项目
1、创建项目
2、创建一个modules的目录，用于放置JS模块等资源文件
3、在modules下创建模块文件，如hello.js，用于编写JS模块相关代码
// 暴露一个方法 sayHi
exports.sayHi = function(){
document.write("<div>hello jiaqing</div>>")
}
4、在modules下创建一个main.js的入口文件，用于打包时设置entry属性
// require导入一个模块 就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();
5、在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports={
entry:"./modules/main.js",
output: {
filename: "./js/bundle.js"
}
}
6、在项目目录下创建HTML页面。如index.html，导入webpack 打包后的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>
7、在idea控制台中执行webpack;如果失败的话，就使用管理员权限即可
8、运行html看效果
webpack --watch 控制台输入实现热部署
网友评论