Vue+Webpack构建项目

第一步:单纯的搭建出来我们的项目，并且通过webpack打包一个bundle.js然后运行起来

步骤:

1、建立项目必要的文件和文件夹(见截图)

图片1.png

2、配置webpack.develop.config.js，指定入口，输出文件

图片2.png

3、在main.js中写代码，App.vue中写代码

图片3.png

图片4.png

4、让我们的项目能运行App.vue

图片5.png

图片6.png

5、打包运行我们的项目

webpack--config webpack.develop.config.js ===>bundle.js

创建template.html 在里面导入bundle.js

在浏览器中运行，即可看到效果

第二步:对我们开发阶段的一个优化(更改源代码就能看到效果)

全局包:webpack-dev-server

本地包:webpack-dev-server html-webpack-plugin

1、html-webpack-plugin 在内存中，根据参照文件(template.html)生成index.html,注意：模版文件中不需要再自己写代码导入bundle.js

用法见截图

图片7.png

图片8.png

2、webpack-dev-server 在内存中生成一个bundle.js

webpack-dev-server对node封装，运行index.html

指令:

图片9.png