1.安装webpack-dev-server

  npm   i webpack-dev-server

2.安装cross-env

npm i cross-env 

3.安装HTML支持文件

npm i html-webpack-plugin

4.配置pack.json文件

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

  },

4.配置config文件

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin');

+ const HTMLPlugin = require('html-webpack-plugin')

const webpack = require('webpack')

const isDev = process.env.NODE_ENV =='development'

const config= {

  target:'web',

  entry: path.join(__dirname, "src/index.js"), //输入文件

  output: {

    filename: "build.js", //输出文件

    path: path.join(__dirname, 'dist') //输出路径

  },

  module:{

    rules:[

      {

        test:/\.vue$/,

        loader:'vue-loader'

      },

      {

        test:/\.css$/,

        use:['style-loader','css-loader']

      },

      {

        test:/\.(gif|png|jpg|jpeg|svg)$/,

        use:[{

          loader:'url-loader',

          options:{

            limit:1024,

            name:'[name]-[hash].[ext]'

          }

        }]

      },

      {

        test:/\.styl$/,

        use:['style-loader','css-loader','stylus-loader']

      }

    ]

  },

  plugins: [

    // make sure to include the plugin for the magic

    new VueLoaderPlugin(),

    new webpack.DefinePlugin({

      'process.env':{

        NODE_ENV:isDev?'"development"':'"production"',

      }

    }),

    new HTMLPlugin(),

  ],



}

if(isDev){

  config.devtool='#cheap-module-eval-source-map',

  config.devServer={

    port:8000,

    host:'0.0.0.0',

    overlay:{

      errors:true

    },

    // open:true  //每次都打开一个网页

    hot:true //只渲染一个组件

  }

  config.plugins.push(

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NoEmitOnErrorsPlugin(),

  )

}

module.exports=config