webpack中的一些基础知识

webpack
Webpack 是前段的一个项目构建工具，它是基于Node.js开发出来的一个前端工具
webpack可以做什么

1. webpack能够处理 JS 文件的互相依赖关系;
2. Webpack能够处理JS的兼容问题，把高级的，浏览器不是别的语法，转为低级的，
   浏览器能正常识别的语法

Webpack要打包的文件的路径，打包好的输出文件的路径
当我们指定完入口和出口后，我们在控制台，直接输入webpack命令执行的时候，webpack
做了以下几步

• 首先，webpack发现，我们并没有通过命令的形式，给他指定入口和出口
• Webpack就回去项目更目录中，查找一个叫做’webpack.comfig.js’的配置文件
• 当找到配置文件后，webpack回去解析这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
• 当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；

Webpack.config.js设置入口和出口方便更改代码

使用webpack-dev-server这个工具，来实现自动打包编译的功能

• 1.运行npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖
• 2.安装完毕后，这个工具的用法，和webpack命令的用法，完全一样
• 3.由于，我们是在项目中，本地安装的 webpack-dev-server，所以，无法把它当作脚本命令，在powershell终端直接运行;(只有那些安装到全局 -g 的工具，才能在终端中正场执行)
• 4.注意：webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack

Webpack-dev-server的常用命令

• 开启webpack-dev-server: npm run dev
• 退出 ctrl+c

–open 自动打开浏览器 --port 3000改变窗口 --contentBase src(打开内容更目录) --hot 减少不必要的代码更新 实现网页不刷新
注意:
Webpack-dev-server中生成的bundle.js和webpac生成的bundle.js不是一个文件