WebPack学习

webpack是Vue中涉及的一个知识点。现在项目多使用vite来代替webpack（在伙伴匹配项目中涉及到vite的使用）

webpack的定义

webPack是一个模块加载器兼打包工具。他可以把各种资源（JS JSX ES6 图片） 作为模块来处理和使用

安装webPack

1. 安装打包工具： npm install webpack -g
2. 安装客户端: npm install webpack-cli -g
3. 测试是否安装成功： webpack -v , webpack-cli -v

项目练习

webpack的使用步骤如下：

1. 创建一个项目
2. 创建一个叫modules的目录，用于放置JS模块等资源文件
3. 在modules下创建模块文件，如hello.js 用于编写JS模块相关的代码

▼
text
复制代码
//暴露一个方法：sayHello:
exports.sayHello=function(){
   document.write("<h1>Vue基础笔记</h1>");
}

4. 在modules下创建一个名字叫main.js的入口文件，用于打包时设置entry属性

▼
text
复制代码
// require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("/hello");
hello.sayHello();```

5. 在项目目录下创建webpack.config.js 配置文件，使用webpack命令打包（如果显示未找到webpack则以管理员身份运行webpack）

▼
text
复制代码
module.exports={
 //进入路径  
  entry: "./modules/main.js",
 // 输出路径 
  output: {
    filename: "./js/budle.js"
  }
}

6. 在项目目录下创建HTML页面，如index.html, 导入webPack打包后的JS文件

▼
text
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
</head>
<body>
<!--通过html文件就可以直接运行打包后的文件了-->
<script src="dist/js/bundle.js"></script>
</body>
</html>

7. 运行HTML查看效果
8. 最终效果的得到的感悟： 可以将打包后的js文件通过html启动，然后直接运行
9. 补充： 参数 --watch用于监听变化 :webpack --watch

背了5个新单词，复习了6个单词 周一作业已补完