webpack-dev-server

 

npm install --save-dev webpack-dev-server@2.9.1

package.json 主要配置如下  (webpack 5+  要配置 webpack-dev-server 3+ )

{
  "name": "prj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {   //版本好
    "@webpack-cli/serve": "^2.0.1",     
    "webpack": "^5.78.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  }
}

webpack.config.jsi

 devServer: {
        // 服务器打开目录
        contentBase: path.join(__dirname, 'dist'),  //打包最终目录
        // 压缩
        compress: true,
        port: 8082,  //端口
        hot: true,    //热更新
        open: true,  //build自动打开浏览器
        //host:  //localhost，也可0.0.0.0，这样同一网段的主机都能通过ip访问
    },

 

此时，我们就可以在这个本地服务其中进行测试，测试完成之后，运行一次npm run start进行打包，发送给服务器进行部署即可，而不需每一次测试都进行一个打包操作。

快捷键 Ctrl+C 退出终端服务，然后输入命令：npm run dev即可直接打开运行结果，而不需要再次点击链接进行访问。