简单使用webpack配置一个Vue的开发环境

初始化并创建项目文件夹

创建项目文件夹（webpack-test）

对项目初始化并安装包
npm init -y

开发依赖（自动把模块和版本号添加到dependencies。）
npm i html-webpack-plugin vue-loader vue-style-loader style-loader css-loader vue-template-compiler webpack@4.44.2 webpack-cli@3.3.12 webpack-dev-server -D

生产依赖（自动把模块和版本号添加到devdependencies。）
npm i vue

1. html-webpack-plugin： 把指定的模板拷贝到打包出口，自动插入打包后的资源地址；
2. vue-loader vue-style-loader vue-template-compiler ： 它们用来处理.vue文件；
3. webpack@4.44.2,webpack-cli@3.3.12 ： 要用webpack必须要先安装它们。这里指定版本的原因是：如果不指定，会默认安装最新版本，目前最新版与webpack-dev-server有些不兼容；
4. webpack-dev-server： 在开发阶段，在内存中实时打包，更新显示结果；
5. 对项目进行初始化并安装包，没有报错即安装成功，也可以在package.json文件中查看有无漏装;
6. 补齐项目文件夹

7. 添加代码
7.1在webpack.config.js中配置项目

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
   
 entry: './src/main.js',//入口
 output: {
   
     path: path.join(__dirname, '/dist'), //出口文件位置
     filename: 'bundle.js' //出口名字
 },
 devServer: {
   
     host: '127.0.0.1',  // 配置启动ip地址
     port: 10088,  // 配置端口
     open: true  // 配置是否自动打开浏览器
   },
 module: {
   
     rules: [
         {
   
             test: /\.vue$/,
             loader: 'vue-loader'
         },
         {
   
             test: /\.css$/,
             loader: ['style-loader', 'css-loader']
         }
     ]
 },
 plugins: [
     new HtmlWebpackPlugin