Webpack_（第三章）_使用WebpackDevServer提升开发效率

Myth丶恋晨 2021-12-11 18:13 348阅读 0赞

**使用WebpackDevServer提升开发效率**  
我们修改代码，如果想在浏览器上正确运行，都需要手动打包`npm run bundle`,这样的话我们的开发效率是非常低下的，我们希望，如果改了src下面的原代码，那么dist目录就会自动打包，那么就简单多了，不用每次都运行`npm run bundle`了。  
要想实现这样的功能，有三种做法  
**方法一：webpack --watch**  
打开package.json文件，当我们运行`npm run bundle`的时候，实际上是在运行webpack命令，我们可以给它加一个watch

"scripts": {
        "bundle": "webpack --watch"
      },

然后执行`npm run bundle`，之后修改src下面的内容。都会自动执行`npm run bundle`  
当加了一个watch参数的时候，是什么意思呢？意思是webpack会帮助我们去监听打包的文件，只要打包的文件发生变化，就会自动的重新打包。  
我们想要在第一次运行`npm run bundle`的时候，自动帮我们实现打包并且把浏览器打开，同时还可以模拟一些服务器上的特性，这样的话通过package.json配置 webpack --watch就不行了  
**方法二：webpack-dev-server**  
借助WebpackDevServer来帮助我们实现  
安装WebpackDevServer，`npm install webpack-dev-server -D`  
在webpack.config.js中配置devServer

devServer: {
        contentBase: './dist'
      },

配置一个最基础的contentBase，意思是服务器要起在哪一个文件夹下，因为打包生成的文件都会放在dist目录下，所以要借助webpack devServer帮我们起一个服务器，这个服务器的根路径在当前目录的dist文件下，当做了devServer的配置，再去package.json中脚本去加webpack-dev-server

"scripts": {
        "bundle": "webpack --watch",
        "start": "webpack-dev-server"
      },

运行 npm run start  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
告诉我们已经帮助我们起了一个服务器叫 http://localhost:8080/，我们可以直接去访问这个地址，显示出我们的项目，这个时候修改index.js的内容，可以被webpack监听到，不需要重新执行`npm run start`，webpack-dev-server的好处是，不仅可以监听到文件发生改变重新帮我们打包，还会自动帮助我们重新刷新浏览器，所以用它可以更方便的提升代码开发的效率。  
**方法三：自己做一个服务器**  
在devServer不成熟的时候，都是靠自己配置，（现在devServer很成熟了，可以不用靠自己配置）  
在package.json中的脚本加一个名为middleware的配置

"scripts": {
        "bundle": "webpack --watch",
        "start": "webpack-dev-server --host 0.0.0.0",
        "middleware": "node server.js"
      },

当运行`npm run middleware`,想自己写一个服务器，这个服务器如果监听到src目录下的内容有改变，会向webpack-dev-server一样，自动帮助我们重启服务器，更新网页上的内容，那么怎么去写这样一个server.js呢  
首先在跟目录创建一个server.js  
要创建一个server的服务器，要在node的环境下，需要安装express，帮助我们快速的搭建一个服务器,这个服务器要监听webpack的变化，帮助重新打包，所以还要借助一个webpack的中间开发件webpack-dev-middleware  
1.安装这两个插件：`npm install express webpack-dev-middleware -D`  
2.在webpack.config.js做配置：

output: {
        publicPath: '/',
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
      },

在output中加上 `publicPath: '/',`，表示的是所有打包生成的文件前面的引用都加一个根路径，确认打包生成的路径不会有问题  
3.写server.js：  
首先引入express、webpack  
然后起一个node的服务器，用express创建一个服务器实例，让这个实例监听3000端口，端口号自己来定，可以写一个回调函数，监听成功会执行。  
![在这里插入图片描述][20190710174054163.png]  
4.运行\`npm run middleware  
![在这里插入图片描述][20190710174124903.png]  
我们已经在3000端口启动一个服务器了  
5. 引入webpackDevMiddleware和webpack.config.js(webpack的配置文件)和complier(webpack的编译器)

const webpackDevMiddleware = require('webpack-dev-middleware')
    const config = require('./webpack.config.js')
    const comlier = webpack(config)

7.app是一个express的实例，可以使用中间件，通过use

app.use(webpackDevMiddleware(comlier), {
      publicPath: config.output.publicPath
    })

意思是只要文件发生改变了，complier编译器就会重新运行，重新运行的文件对应的打包输出的内容publicPath就是config.output.publicPath  
8.运行\`npm run middleware  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 1]  
修改文件，可以重新打包了，但是没有帮助我们实时刷新，事实上要自己写一个server要花费很大的精力，推荐用devServer来实现。

**补充：**  
**1.为什么要开这样一个服务器呢？**  
有时候我们在前端要去写ajax请求，如果是直接通过文件的形式打开，就不可以发送ajax请求了，因为你想发ajax请求，要求所在的index.html必须在一个服务器上，通过http协议的方式打开。通过file协议的方式打开肯定是不行的，这就是为什么我们要借助webpack-dev-server来帮助启动一个web服务器  
当我们使用vue和react项目都知道，都会帮助我们开启一个服务器，这个服务器大部分都是使用webpack-dev-server。  
proxy： 配置，帮助我们做跨域接口模拟的时候要使用的接口代理  
为什么在vue和react中可以使用proxy这个接口代理呢，因为他们的底层都使用了devServer  
官网： DOCUMENTATION---->CONFIGURATION—>DevServer  
**2.devServer配置**

devServer: {
        contentBase: './dist',
        open: true,  // 在启动DevServer的时候，自动帮我们打开浏览器，
                     // 然后自动的访问服务器的地址
        proxy: {
          'api': 'http://localhost:3000'   // 如果用户访问api这个地址，也就是访问locahost:8000下面的api这个路      径，会直接帮我们转发到locahost:3000这个地址，之所以之前的脚手架都可以这样配置，是因为底层使用了devServer
        }，
        port: 8090,  // 设置端口号
        host: "0.0.0.0"
      },

"scripts": {
        "bundle": "webpack --watch",
        "start": "webpack-dev-server --host 0.0.0.0"
      },

可以通过IP地址访问  
**3.总结**  
三个简化开发的方式

"scripts": {
        "bundle": "webpack --watch",
        "start": "webpack-dev-server --host 0.0.0.0",
        "middleware": "node server.js"
      },0

第一个方式是借助webpack --watch，会监测到要打包的代码发生了变化，会自动的帮我们执行打包，但是不会帮我们起一个服务器，意味着这种方式的打包没办去去做ajax的请求，而且每次打包完成之后，需要重新刷新浏览器。  
第二种方法是webpack-dev-server，这是应用最广泛的方法。我们安装完webpack-dev-derver之后，在webpack.config.js配置devServer，然后运行项目就会帮助我们启动一个服务器，帮助我们打包代码，还会帮助我们自动的刷新浏览器。  
第三种方法是手写了一个类似于webpack-dev-server的内容，运行middleware的时候实际上是运行了一个server.js文件，在node中直接使用webpack

官网：DOCUMENTATION—>API—>Comand Line Interface 查看webpack在命令行中命令  
DOCUMENTATION—>API—>Node.js API 在node中去运行webpack，这是一些使用接口  
DOCUMENTATION—>GUIDES—>Development

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20211211/3dbc5768a5864b6b8bfe1b665d847ca3.png
[20190710174054163.png]: /images/20211211/08a6408d39864589ba690afd39e67bc8.png
[20190710174124903.png]: /images/20211211/6a83bb0f825c4e788c4b117bec8456fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 1]: /images/20211211/ceea854bf1bf40b1956637a6e058f573.png