• 安装webpack4

  本文的webpack版本为webpack4,所以需要安装webpack和webpack-cli开发依赖

npm i webpack webpack-cli  -D 

• 新建build文件夹，在build文件夹下新建webpack.dev.conf.js，并修改package.json中scripts

/*package.json*/
  "scripts": {
    "dev": "webpack --config build/webpack.dev.conf.js",
    "sev": "webpack-dev-server --progress --config build/webpack.dev.conf.js"
  },

• 安装vue依赖

npm i vue  -S

• 安装vue-loader css-loader style-loader vue-template-compiler

npm i vue-loader css-loader style-loader vue-template-compiler -D

• 安装html-webpack-plugin clean-webpack-plugin

npm i html-webpack-plugin clean-webpack-plugin -D

• 配置webpack.dev.conf.js

const path  = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');     //清除dist目录缓存
module.exports = {
  mode:'development',
  entry:'./src/main.js',
  output:{
    filename:'bundle.[hash:8].js',
    path:path.resolve(__dirname,'../dist')
  },
  module:{
    rules:[
      {test:/\.vue$/,loader:'vue-loader'},
      {test:/\.css$/,use:[
        {loader:'style-loader'},
        {loader:'css-loader'},
      ]},
    ]
  },
  plugins:[
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(['dist'], {
      root: path.resolve(__dirname, '../'),    //根目录
      verbose:  true,        　　　　　　　　　　//开启在控制台输出信息
      dry:      false        　　　　　　　　　　//启用删除文件
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template:'./index.html',
      title:'ElementUI后台',
      hash:true
    })
  ]
}