DevServer-提升开发效率

本学习教程使用的webpack及脚手架对应的版本如下:
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.11.3"

在之前的学习中，我们每次打包的时候都要手动删除打包生成的目录bundle，在每次打包完成之后，都要手动打开bundle目录下的index.html文件，才能在浏览器中浏览我们的页面，每次这样做显然会影响我们的开发效率，我们希望每次改了src下面的源代码，那么bundle目录都会自动重新打包，并且页面也可以跟着刷新，这样就不用我们手动去做这些事情了，要想实现这样的功能，有三种做法，我们一一来看一下:

第一种

在package.json中，修改scripts配置如下:

  "scripts": {
    "watch": "webpack --watch" //在这里加 --watch意思是webpack会帮助我们监听他打包的文件，只要他打包的文件发生变化，它就会自动重新帮助我们打包
  },

运行npm run watch,打开bundle下面的index.html文件，可以看到在控制台打印了：hello world!!!的字符串，我们修改入口文件为:

console.log('你好啊，李银河')

修改完之后点击保存，这时我们可以看到在命令行窗口，webpack有自动帮我们打包了一次，打开浏览器，这时控制台打印的内容已经变成了'你好啊，李银河',只要我们的源代码发生变化，webpack就可以监听到打包文件发生了变化，他就会去重新打包，打包之后bundle目录下的文件就会发生变化，浏览器里面展示的内容webpack也会帮我们进行刷新，所以我们看到的就是最新的打印内容了。

第一种方式可能还没有我们希望的那么智能，我们希望在第一次打包完成后，webpack就可以帮我们自动打开浏览器窗口同时还可以去模拟服务器上的一些东西。

第二种借助DevServer帮我们实现更炫酷的效果

1.安装DevServer

npm install webpack-dev-server -D

2,配置DevServer

var path = require('path'); //引入node的核心模块path，来处理路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', //注意：在mode为development时，默认sourceMap已经被配置了
    devtool: 'inline-source-map',
    devServer: {//新增加的代码
        contentBase: path.join(__dirname, 'bundle '), //表示借助webpackdevServer帮助我们启动一个服务器，服务器的地址就是当前目录下的./bundle文件夹，也就是打包生成的目录
        open:true//指当运行npm run start的时候，webpack-dev-server会被启动，open是指当打包完成之后webpack自动帮助我们打开浏览器，自动访问浏览器的地址
    },
    entry: {
        main: './src/index.js', //入口文件为当前目录下的src下的index.js文件
    },
    output: {
        path: path.resolve(__dirname, 'bundle'), //__dirname:表示当前文件所在的文件目录，也就是项目根目录,打包生成的文件放在bundle目录下
        filename: '[name].js', //在这里动态获取打包生成的文件打包后的文件名
    },
    module: {
        rules: [{
                test: /\.(jpe?g|png|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash:6]. [ext]',
                        outputPath: 'images',
                        limit: 204800 //表示当图片的大小超过200kb时，将其打包生成图片
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        modules: true
                    }
                }, 'sass-loader', 'postcss-loader']
            },
        ]
    },
    plugins: [new HtmlWebpackPlugin()],
}

配置好之后，我们运行npm run start命令，打包完之后，webpack帮我们开了一个http://localhost:8080/的服务器，并帮我们打开了这个服务器，f12打开控制台，可以看到我们在index.js中输出的'你好啊，李银河'已经出现在了浏览器控制台中。

第三种 自己写一个服务器

(1)借助express框架

npm install express webpack-dev -middleware -D

(2)在项目目录下编写server.js文件

const express = require('express');
const webpack = require('webpack');//在node中使用webpack
const webpackDevMiddleware = require('webpack-dev-middleware') //引入webpack开发中间件
const config = require('./webpack.config.js') //引入当前目录下的webpack配置文件
const complier = webpack(config); //complier意思是使用webpaack结合webpack配置文件，可以随时进行编译，complier执行一次，其实就会帮我们编译一次代码
const app = express() //创建一个服务器实例
app.use(webpackDevMiddleware(complier, { //表示使用complier进行编译的时候，publicPath为配置文件的publicPath
    publicPath: config.output.publicPath
}))
app.listen(3000, () => { //服务器监听3000的端口
    console.log('server is running!!!'); //服务器开启成功之后会输出这句话
})

(3)在webpack.config.js的output中添加一个publicPath的选项:

   output: {
        publicPath: '/',//新增的
        path: path.resolve(__dirname, 'bundle'), //__dirname:表示当前文件所在的文件目录，也就是项目根目录,打包生成的文件放在bundle目录下
        filename: '[name].js', //在这里动态获取打包生成的文件打包后的文件名
    },

(4)修改package.json配置文件:

  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "dev": "node server.js" //新增的，当我们运行npm run dev的时候node会帮助我们去执行server.js文件
  },

做完上面所有步骤，我们运行npm run dev，可以看到在命令行打印出了:server is running!!!,我们在浏览器中访问:localhost:3000，在控制台中我们输出的内容就被打印出来了。
可以看到我们自己写的服务器其实远没有webpack-dev-server那么智能，因此在日常开发中比较推荐直接使用webpack-dev-server就好