Webpack教程

课程目标

什么是devServer
配置devServer
devServer的特点
为什么我们要使用devServer
配置跨域代理proxy

一、什么是devServer

webpack-dev-server就是一个小型的静态文件服务器。可以为webpack打包生成的资源文件提供Web服务，自动打包文件。

二、配置devServer

先下载webpack-dev-server npm intall webpack-dev-server - D
在package.json中配置

"scripts": {
    "start": "webpack-dev-server"  //自动启动和修改代码之后自动刷新
    //启动时使用npm run start即可
  }

在 package.config.js中配置

和module 和devtool同级添加
devServer:{
    contentBase：'./dist'，
    //当我使用npm runstart会自动打开我的浏览器
    open:true,
}

三、devServer的特点

令Webpack进行模块打包，并处理打包结果的资源请求
作为普通的Web Server，处理静态资源文件请求
解决了来回npm run build,再更新代码的问题，比较便捷
可以设置port端口和open(自动打开页面)，其他更多配置可以参考官网
自动刷新：浏览器自动更改后的内容

四、为什么我们要使用devServer

在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。

五、配置跨域代理proxy

devServer:{
    contentBase:"./dist",
    open:true,
    proxy:{
        '/api':{
            target: 'http://localhost',
            changOrigin: true,

        }
    }
    
}

六、总结：三种简化开发的方式

第一种方式，在命令行中使用webpack

在package.json中配置"watch":"webpack--watch",

webpack--watch的优点：

可以帮助我们提高开发效率，
可以监控到我们代码的修改，自动打包刷新缺点：
不可以打包的时候启动一个服务器，只是在file文件中手动启动浏览器开打效果，无法做到ajax请求
每次打包之后都需要手动刷新

"script":{
    "watch":"webpack--watch"
}

第二种方式,在命令行中使用webpack

在package.json中配置

"script":{
    "start":"webpack-dev-server"
}

在webpack.config.js中配置

 devServer:{
      contentBase：'./dist'，
      //当我使用npm runstart会自动打开我的浏览器
      open:true,
  }

优点：

代码的修改可以自动打包并打开浏览器，自动刷新浏览器

第三种方式，在node中直接使用webpack

"scripts"：{
    "server":"node server.js"
}

server:"node server.js"是手动写的server.js文件

使用server要提前下载 npm install webpack-dev-middleware"，代表中间站
下载 npm install express -D,下载express框架
在src目录下新建一个server.js文件，将文件内容进行书写详细请看网站

Webpack 07之DevServer提升开发效率