一步一步使用webpack搭建项目

MPA |-src
	   |-main.js 项目打包的入口文件
	   |-App.vue 项目的根组件（项目一启动，见到的第一个页面）
	|-package.json 项目的描述文件，用于记录安装了哪些包
	|-webpack.config.dev.js 开发阶段webpack的配置文件
切换到根目录，使用 npm init -y 生成package.json

tips:vue项目跟react项目目录结构基本一致

二:

webpack-dev-server & webpack的区别

webpack-dev-server :【内部开启了一个node服务】
    开发阶段使用，它是在webpack基础上又封装了一把，webpack有的功能它都有，并且
    还拓展了一些，打包生成的bundle.js及index.html都是发布到它内部开启的node服务
    上面去了

webpack：生产阶段，它是在整个项目做完了之后，接下来，打包生成可以上线的
静态资源

注意：webpack的版本和webpack-dev-server的版本是需要对应的，否则会报错

webpack 3.x版本  对应  webpack-dev-server2.x

webpack 4.x版本  对应  webpack-dev-server3.x

三：

package.json 和 package-lock.json 作用分析

1.package.json 文件里记录有项目所安装的依赖项，当 node_modules 被删除时，可以再根据该文件安装所需的依赖项；

2.npm 5 以前不会有 package-lock.json 这个文件，npm5 之后才加入这个文件；

3.当安装包的时候，npm 都会生成或者更新  package-lock.json 这个文件；

4.npm 5 之后的版本安装包的时候不需要加 --save 参数，它会自动保存依赖的信息；

5.当安装包的时候，会自动创建或者更新 package-lock.json 文件；

6.package-lock.json 文件会保存 node_modules 中所有包的信息（版本、下载地址），重新 npm install 的时候速度会提升；

7.文件的名称有 lock ，表示该文件可以用来锁定版本号，防止自动升级新版。

四：

使用 webpack-dev-server 和 html-webpack-plugin 运行我们的项目

html-webpack-plugin
    以一个参考文件为模版，生成index.html，并且会自动发布到webpack-dev-server开启的node
    服务上面去

    参考:https://github.com/jantimon/html-webpack-plugin

    步骤:
        1、在根目录下面，创建一个template.html，里面写上id=app的div

        2、在webpack.config.dev.js中的plugins中写代码

webpack-dev-server
    放在package.json中的scripts中去

    webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot

    --port 指定node服务运行的端口号
    --open 把我们项目运行在浏览器中，并且自动打开浏览器
    --hot 实现热重载/热替换/热更新/热加载

最终运行，切换到根目录，运行 npm run dev

五：

第一次安装
    包:vue
    应用场景:我们要去运行App.vue
    安装方式：npm i vue -S

第二次安装
    包:vue-loader vue-template-compiler css-loader style-loader
    应用场景:我们要打包.vue结尾的文件
    安装方式：npm i vue-loader vue-template-compiler css-loader style-loader -D

第三次安装
    包:html-webpack-plugin webpack@3.11.0 webapck-dev-server@2.11.1
    应用场景:我们到时候运行打包出来的bundle.js
    安装方式:npm i html-webpack-plugin webpack@3.11.0 webpack-dev-server@2.11.2 -D