webpack4.0构建vue项目(适合新手)

一.首先必须要安装node.js
1.1：安装node.js地址 link
1.2：安装时候可以默认选择C盘安装，也可以安到你指定的任意磁盘（如D盘），安装过程你可以按照默认方式下一步，安装完成后，需要配置一下环境变量（如安到C盘请忽略此步）-----具体安装细节请查阅

二.安装webpack
2.1：在F盘创建一个新的文件夹（如vue-my-project

2.2：win+r 打开cmd

2.3：输入F:进入你的F盘，然后cd vue-my-project目录下

2.4:首先运行npm init -y,初始化你的项目(会在你的文件夹下自动生成一个package.json文件)

2.5:安装webpack,webpak4.0需要webpak-cli(npm install webpack webpack-cli -D)这样安装就可以使webpack安装到开发依赖中(https://www.webpackjs.com/guides/getting-started/)安装完成之后，你会发现你的package.json文件中会出现你安装的这两个模块

2.6然后在你的文件夹下新建这几个文件夹和文件

2.7:安装webpack-dev-server(npm i webpack-dev-server -D)并且配置package.json和webpack.config.js这两个文件让你的项目用npm run dev运行起来
2.7.1:__dirname是根目录，配置这些文件是让你打包main.js时候指定打包目录

2.7.2:安装html-webpack-plugin解析html模版(npm i html-webpack-plugin -D)并且配置webpack.config.js文件

三:安装vue(npm i vue -S)

四:安装vue-loader和vue-template-compiler解析vue模版(npm i vue-loader vue-template-compiler -D),并且配置webpack.config.js文件
4.1:安装

4.2:配置webpack.config.js文件

五:在src下新建一个App.vue文件，并且在js中导入，然后导入到index.html
5.1新建一个App.vue文件

5.2:写main.js代码

5.3:绑定到index.html页面中

六:在cmd中运行npm run dev 查看结果
6.1在cmd中运行npm run dev

6.2:浏览器中查看(哈哈哈，成功了，是不是很有成就感)