打包工具

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（欢迎各位进行指导）