没有webpack之前，搜索真个node_modules目录来定位每个包的路径，再手动添加到html中，如下：

这样很不方便。
大多数编程语言都会提供从一个文件导入另一个文件代码的机制，javaScript 初期没有这个特性，所以初期组织多个文件的javaScript代码就是把每个文件下载下来。变量是全局共享的
导入有以下三种方式：
CommonJs中很大的一部分便是对模块系统的规范
使用require语句导入包
ES6使用import导入

先用require在js文件中导入其他js文件。例如：const a=requier(‘jquery’); 自己会在node_modules目录中找对应的jquery.min.js文件，这样就可以通过 a变量来使用jquery中的东西了。

require好还可以这么用：

证明了require不仅可以引入模块 还能引入自己写的js

解决ES6语法兼容性问题

通过npm安装包来解决ES6兼容性的问题。有些浏览器的低版本不支持es6的语法：
1.可以通过在线转换（通过在线加载工具包转换），这种编译会加大页面渲染的时间
2.提前编译：开发的时候使用es6的语法，打包放在服务器上的时候同时转为es5的语法。比较通用的工具方案有babel,jsx 。
使用babel来举例：
进入前端资源静态库：https://cdn.baomitu.com/
搜索babel 找最新版本的引用地址

即可找到对应版本的引用地址。

我们使用npm下载 不用引用地址的方式。
搜索包 可以获得npm的下载命令 地址：https://www.npmjs.com/package/package
如图:

比如：编译安装babel-cli
npm install --save-dev babel-cli 同时在项目根目录下创建.babelrc文件(注意改文件前有个点)(与package.json文件同级别,) 并且添加如下内容：
{
“presets”:[“es2015”,“stage-2”],//设置转码规则
“plugins”:[“transform-runtime”]//设置插件

}
//解释 转成es2015
需要安装： npm i babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 -D

在package.json的script节点中：加上"build":“babel src -w -d lib”
babel src -w -d lib 这个意思是将src 下所有的文件通过babel工具以及配置的es2015打包编译到lib目录下 -w就是watch监听的意思 监听文件 实时变异输出 -d 表示输出目录
所以一定要建src目录
编译前：
const name =“hello world!”;
console.log(name);
编译后：
“use strict”;
var name = “hello world!”;
console.log(name);
目录结构如下：