首先要明白vue项目的基本目录结构,如下:
1. dist
2. src
2.1 index.html
2.2 index.js
2.3 App.vue
2.4 router.js
3. webpack.config.js
4. .babelrc
以上是基本目录,首先应该初始化目录,使用 npm init -y 初始化目录,会生成 package.json 这个文件,这个文件很关键
步骤:
1. 下载 webpack
cnpm i webpack webpack-cli --save
2. 下载 实时监控代码修改的插件 webpack-dev-server
cnpm i webpack-dev-server --save
3. 然后在 package.json 里的 scritps 里添加指令:"dev":"webpack-dev-server --open --port 3000 --hot"
添加热更新
4. 可以让 html 文件存到内存里面,因此要下载插件 html-webpack-plugin
下载之后,在 webpack.config.js 文件里设置
首先引入 html-webpack-plugin 插件
const htmlWebpackPlugin = require("html-webpack-plug