1.3.1、安装依赖

  1. npm i webpack-dev-server -S
  2. npm i cross-env -S

1.3.2、配置package.json文件

  1. "scripts": {
  2.     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
  3.       //npm run dev
  4.     "dev":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  5.   },

1.3.3、配置webpack.config.js

  1. const isDev = process.env.NODE_ENV ==='development'
  2. if(isDev){
  3.     config.devServer = {
  4.         port:8080,
  5.         host:'0.0.0.0',
  6.         overlay:{
  7.             errors:true
  8.         },
  9.         hot:true
  10.     }
  11. }
  1. npm run dev
  2. http://localhost:8080端口查看

1.3.4、判断是开发还是生产环境

  1. plugins:[
  2.         new CleanWebpackPlugin(),
  3.         new htmlWebpackPlugin(),
  4.         new webpack.DefinePlugin({
  5.             // 这里定义在js中可以引用用于判断当前开发环境
  6.             'process.env':{
  7.                 NODE_ENV:isDev?'"development"':'"production"'
  8.             }
  9.         })
  10.     ]

1.3.5、热加载

1.安装热加载插件，使页面不需刷新直接显示最新数据在判断中加入hot: true激活热更新 2.插入新的插件new webpack.HotModuleReplacementPlugin() / new webpack.NoEmitOnErrorsPlugin() 3.引入devtool

  1. if (isDev) {
  2.     config.devtool = '#cheap-module-eval-source-map',      
  3.     // vue-devtools是一款基于chrome游览器的插件，用于调试vue应用
  4.     config.devServer = {
  5.         port: 8880,
  6.         host: '0.0.0.0',
  7.         overlay: {
  8.             errors: true,
  9.         },
  10.         // 当修改一个组件时只修改当前的部分，不需要修改整个页面
  11.         hot: true,          
  12.     },
  13.     config.plugins.push(
  14.          // 作用：HMR插件将HMR Runtime代码嵌入到bundle中，能够操作APP代码，完成代码替换
  15.         new webpack.HotModuleReplacementPlugin(),   
  16.         // 作用：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
  17.         new webpack.NoEmitOnErrorsPlugin()                
  18.     )
  19. }