什么是 webpack-dev-server

  • ​​webpack-dev-server​​​ 和​​watch​​ 一样可以监听文件变化
  • ​​webpack-dev-server​​ 可以将我们打包好的程序运行在一个服务器环境下
  • ​​webpack-dev-server​​ 可以解决企业开发中 "开发阶段" 的跨域问题

使用 webpack-dev-server

安装 webpack-dev-server

官方地址：​​https://www.npmjs.com/package/webpack-dev-server​​

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

配置 webpack-dev-server

webpack-dev-server_端口号

devServer: {
    contentBase: "./bundle", // 打包后的目录
    open: true, // 是否自动在浏览器中打开
    port: 9090 // 服务器端口号
},

然后在修改 webpack 打包脚本，从之前的 ​​npx webpack --config webpack.config.js​​​ 改为 ​​npx webpack-dev-server --config webpack.config.js​​：

webpack-dev-server_Webpack4+实现原理_02

"start": "npx webpack-dev-server --config webpack.config.js"

都配置完毕之后测试方式就是在终端输入 ​​npm run start​​ 然后就会自动打开浏览器，并且端口号是你设置的端口号，不设置默认为 8080，不配置自动在浏览器打开是需要自己进行访问的，而且你还可以在启动之后修改文件内容可以很明显的发现帮你进行了编译和刷新，这里博主就不进行测试阶段的内容编写了

webpack-dev-server_跨域问题_03