webpack5之webpack-dev-server（实时重新加载(live reloading）

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading

• 安装webpack-dev-server

npm install --save-dev webpack-dev-server

特别注意，以下的版本是不兼容的

• webpack.config.js
  • 注意，这里添加了devServer字段，用于配置webpack-dev-server

const path = require('path');
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入clean-webpack-plugin插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
  // 打包入口
  entry: {
    app1111: './src/index.js',
    print: './src/print.js'
  },
  // 输出
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 显示错误的来源
  devtool: 'eval',
  // 配置devServer
  devServer: {
    contentBase: './dist'
  },
  // plugins进行插件的配置
  plugins: [
    // 清除dist文件夹
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ]
};

• package.json
  • 这里在scripts中添加了start字段，使用npm start运行即可

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
	"webpack": "^5.1.0",
    "webpack-cli": "^4.0.0"
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

• npm start运行

注意，这里会报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs’

• 百度查找原因这是因为webpack、webpack-cli、webpack-dev-server是需要版本匹配的

运行以下版本是可行的，webpack.config.js文件不变，安装新版本的webpack和webpack-cli和webpack-dev-server，package.json文件如下

• “webpack”: “^4.43.0”,
  “webpack-cli”: “^3.3.12”,
  “webpack-dev-server”: “^3.11.0”
• 安装命令行代码

npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0 webpack-dev-server -D 

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

• npm start运行
  
  

修改print.js，点击保存

• 原本的print.js

export default function printMe () {
    console.log('print.js');
    console.error('我是一个错误')
}

• 修改后的prtint.js

export default function printMe () {
    console.log('print.js');
}

• 运行npm start，这样就实现了实时打包，相当于补丁更新