Webpack

Webpack教程

课程目标

1.什么是devServer
2.配置devServer
3.devServer的特点
4.为什么我们要使用devServer
5.配置跨域代理proxy

什么是devServer

ebpack-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

1.在package.json中配置"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文件，将文件内容进行书写
详细请看网站