项目初始化先建一个文件夹 firstApp└── webpack.config.js webpack 配置文件mac电脑进入到firstApp文件夹中右键然后选择 Git Bash here执行命令初始化项目npm init接着输入一些配置信息Enter进去即可生成一个默认的项目配置文件 package.json。目录结构如下 ├── dist 打包输出目录只需部署这个目录到生产环境 ├──package.json 项目配置信息 ├── node_modules npm 安装的依赖包都在这里面 ├── src 我们的源代码 │ ├── components 可以复用的模块放在这里面 │ ├── index.html 入口 html │ ├── index.js 入口 js │ ├── shared 公共函数库 │ └── views 页面放这里安装包安装 eslint 用来检查语法报错有错误的地方会出现提示。npm install eslint eslint-config-enough babel-eslint eslint-loader --save-devnpm install可以一条命令同时安装多个包包之间用空格分隔。包会被安装在node_modules目录中。--save-dev会把安装的包和版本号记录到 package.json 中的 devDependencies 对象中。--save会记录到 dependencies 对象中它们的区别可以简单的理解为打包工具和测试工具用到的包使用--save-dev存到 devDependencies 比如 eslint、webpack。浏览器中执行的 js 用到的包存到 dependencies 比如 jQuery 等。这是因为有些 npm 包安装是需要编译的导致 windows / mac /linux 上编译出的可执行文件是不同的无法通用因此提交代码到 git 上去的时候一般都会在 .gitignore 里指定忽略node_modules 目录和里面的文件这样其他人从 git 上拉下来的项目是没有 node_modules 目录的这时我们需要运行npm install它会读取 package.json 中的 devDependencies 和 dependencies 字段把记录的包的相应版本下载下来。这里 eslint-config-enough 是配置文件它规定了代码规范要使它生效我们要在 package.json 中添加内容{ eslintConfig: { extends: enough, env: { browser: true, node: true } } }