先说再前面, 本篇博文是没有用vue-cli搭建的, 只是一个学习webpack的demo, 当然也不能用于实际开发中, 如果读者想看vue-cli搭建实际开发项目, 可以去vue-cli3

我们的目的是搭建一个带有热更新的vue开环环境项目

1. 创建package.json

   npm init -y

2. 创建项目目录
   

3. 编写代码

   • app.vue

   • index.html

     
     

   • main.js

     import Vue from 'vue'
     import App from './app.vue'
     
     new Vue({
         el: "#root",
         render: h => h(App)
     })

4. 安装依赖package.json

   {
   "name": "webpack-vue",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
   "dev": "webpack-dev-server --config webpack.config.dev.js --progress --open --hot"
   // --open 自动打开浏览器
   // --hot 打开热更新功能'
   // 执行npm run dev 就可以愉快的开发了
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
   "css-loader": "^1.0.0", // 处理css文件
   "html-webpack-plugin": "^3.2.0", // 简化HTML文件的创建，为您的webpack捆绑服务提供服务
   "style-loader": "^0.23.1", // 处理css文件
   "vue-loader": "^15.4.2", // 处理 .vue文件
   "vue-template-compiler": "^2.5.17", // vue-loader的依赖
   "webpack": "^4.20.2", // webpack
   "webpack-cli": "^3.1.2", // 0-0
   "webpack-dev-server": "^3.1.9" // 把项目运行在本地服务上, 将webpack与提供实时重新加载的开发服务器一起使用
   },
   "dependencies": {
   "vue": "^2.5.17"
   }
   }

5. 配置webpack.config.dev.js

   const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入vue-loader插件
   const HtmlWebpackPlugin = require('html-webpack-plugin') // 创建html文件的插件

   module.exports = {
   mode: "development", // 指定环境
   entry: "./src/main.js", // 入口文件
   module: {
   rules: [ // 处理所用的loader, webpack4和之前的版本有所不同
   {
   test: /.vue$/,
   loader: ["vue-loader"]
   }
   ]
   },
   plugins: [ // 使用的插件
   new VueLoaderPlugin(),
   new HtmlWebpackPlugin({
   template: './src/index.html' // 使用的html模板文件的路径
   })
   ]
   }

完成以上代码就完成了一个最基本的带有热更新功能的vue开发环境