项目根目录

• src 文件夹中存放的是项目源代码
• dist 存放发布完成后的产品级内容

一.src文件夹

• css css文件
• js js文件
• images 图片资源
• main.js 项目js入口文件
• index.html 项目首页

二.dist文件夹

三.使用npm给项目安装包，例jquery

• npm init -y 在init时会生成package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。内部各字段含义可参考：https://www.cnblogs.com/whkl-m/p/6617540.html

• npm i jquery -S 安装jquery包。 在使用npm安装各依赖包时，会自动生成1.node_modules存放所有的包。2.package-lock.json 根据官方文档，这个package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。它有什么用呢？因为npm是一个用于管理package之间依赖关系的管理器，它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本，这里举个例子：
  "dependencies": {
  "@types/node": "^8.0.33",
  },
  这里面的 向上标号^是定义了向后（新）兼容依赖，指如果 types/node的版本是超过8.0.33，并在大版本号（8）上相同，就允许下载最新版本的 types/node库包，例如实际上可能运行npm install时候下载的具体版本是8.0.35。更多内容可参考 https://www.cnblogs.com/cangqinglang/p/8336754.html

在项目中安装使用webpack

1.安装webpack

• npm i webpack -g 全局安装webpack
• 在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中
  !!webpack4将webpack包中的webpack-cli拆分出单独的一个包，需要单独安装
  sudo npm install webpack-cli -g

npm list -g --depth 0 查看全局安装的包列表

2.使用示例

上面1已安装完成jquery，在main.js文件中使用时，
1.使用ES6语法引入import = require('jquery') 运行时会报引用错误，浏览器中不支持require方法
可通过webpack打包main.js文件来解决

3.配置webpack.config.js

• entry入口文件名
• output: {
  filename: 输出文件名
  path: 输出文件所在目录的绝对路径
  }
• 配置完成后，终端项目目录下执行webpack，打包完成后可以看到dist文件中有一打包完成的bundle.js文件，在首页html中引入bundle.js，运行

小结

webpack作用
1.处理js文件的相互依赖关系，我们不能每一js文件都引入一遍想要使用的包，可将所有想要引入的包，引入main.js，对main.js进行打包后，只用引入bundle.js文件即可
2.webpack可以处理js的兼容问题，把高级的、浏览器不识别的语法，转为低级的、浏览器能正常识别的语法##4.实现自动打包编译的功能
工具：webpackwebpack-dev-server

• 运行 npm i webpack-dev-server -D 安装该工具到项目的本地开发依赖
• 该工具的用法和webpack命令的用法一样
• 注意该工具是本地安装在我们的项目中，没有安装在全局中，所以不能在终端中当作脚本命令直接运行