1、webpack
首先需要安装node，完了安装webpack npm install [email protected] -g (全局安装)
webpack npm install [email protected] --save-dev (局部安装)
webpack就是一个打包工具，用来处理各个模块之间的依赖，比如使用commonjs的语法来导入导出模块，直接在index.html里面引入两个js，浏览器是无法识别的，所以需要webpack来打包，处理多个模块之间的依赖
npm init 指令会生成package.json 管理项目中的依赖，scripts中简化指令,可以定义启动脚本，跟在终端直接使用指令的区别，一个是定义启动脚本后，使用简单，另一个是默认使用的是局部安装的指令，没有才会去使用全局指令
为了简化指令，可以指定webpack的入口和出口，定义在webpack.config.js文件中，名字不可改变，后面会学习如何改变这个文件名，目前阶段不可以改变
其中的path是node定义，动态获取路径，这样切换项目拷贝此文件的时候，不需要修改。
不这么配置，启动命令是 webpack ./src/main.js ./dist/bundle.js ,配置完出入口后直接webpack就可以，这样使用的是全局的，开发时，有可能局部的webpack版本和全局的不一样，这个时候需要使用局部的webpack版本，使用开始写的命令执行就可以，执行完之后，package.json文件中会有依赖加入，webpack只是一个打包工具，上线后不需要webpack包，所以属于是开发时依赖，在devDependencies中，然后需要在scripts中配置，之后只需要执行npm run build ，就相当于执行局部的webpack命令
当需要导入css文件的时候，webpack处理不了css文件，只能处理了js文件，所以像css、图片等其他文件，就需要安装对应的loader来处理，
https://www.webpackjs.com/ 有对应loader的安装方法和配置，比如require("./css/test.css") 就需要安装css和style两个loader，webpack在读取配置文件的loader时是从右向左读取，所以右边是css的loader，
css的loader只负责解析css代码，不负责添加到dom中，所以需要style的loader
安装完loader后npm run build 报错，是因为跟着学习，webpack安装的版本是3.6.0，而自动安装的css loader版本过高，卸载重装就可以了,或者直接修改package.json里的版本号，开发工具会让直行npm install，执行完就可以了
npm uninstall css-loader
npm install [email protected] --save-dev