1.为什么要使用打包工具？
--因为使用模块化开发，运行在服务器端，要想运行在浏览器端，需要对文件进行打包编译（需要用到打包工具）。
2.打包工具种类
--1.browserify打包工具
--下载browserify（下载到全局或当前目录）npm install browserify
--在终端窗口输入 browserify 被打包文件名 > 打包完成后输出文件，完成对文件的打包。
--2.webpack打包工具
--在全局和当前目录下载3.8.1版本的webpack；npm install webpack@3.8.1(全局下载在后面加 -g)
--打包语句：webpack 被打包文件/被打包文件路径 输出文件/输出文件路径
--这样打包的缺点是每次打包完成之后都需要 输入指令进行打包
--配置webpack.config.js对指令进行缩减
module.exports={
entry:"./index.js", //被打包文件
output:{
path:__dirname+"/dist",//输出文件所在文件夹
filename:"./bundle.js"//输出文件名称
},
module:{
loaders:[
{
test:/.css$/,//对文件的类型检测
loaders: "style-loader!css-loader"//使用对应的插件
},
]
}
}
--配置文件后只需要输入指令webpack 就可以对文件进行打包（要保持文件名正确）
--这样指令简短了不少 但是还是要一次次的输入指令
--3.webpack自动打包
--下载webpack-dev-server（在全局和当前都要下载；注意webpack-dev-server的版本要比webpack第一个版本；比如后者是4.0版本前者必须是3.0版本否则会报错）
总之，版本一定要对应我现在用的webpack（3.8.1）对应webpack-dev-server（2.9.4）其他版本请小伙伴们在百度上查找。
下载完成之后在终端输入webpack-dev-server --hot --inline 启动服务器；启动后在浏览器进行验证：默认是在127.0.0.1:8080/ 和 locahost:8080/
确认启动后需要在html文件中改一下js引入的路径 改成只有文件名
--对指令进行缩减
在package.json中的script属性（没有的话可以自行加上；属性值是数组）中加入"dev":"webpack-dev-server --hot --inline"
这样的话在终端中只需要输入npm run dev（必须与上方添加的属性一致）
以上纯属个人见解本人 tel：15934465474（微电同号） qq：3316455037（欢迎各位进行指导）