webpack与webpack-dev-server的区别

webpack

一个模块打包器，根据entry指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
每个依赖项随即被处理，最后输出到output字段指定的文件中
这里写图片描述
main.js引入child1.js、child2.js
package.json如下：

{
    "name": "webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack"
    },
    "devDependencies": {
        "webpack": "^4.12.0",
        "html-webpack-plugin": "^3.2.0",
        "webpack-dev-server": "^3.1.4",
        "webpack-cli": "^3.0.8"
    },
    "author": "xiaoxu",
    "license": "ISC"
}

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            inject: true,
            template: path.resolve(__dirname, "index.html"),
        })
    ]
}

执行npm start，就执行了“webpack”命令，之后项目目录出现了dist目录：
这里写图片描述
这里如果修改了文件内容，那需要手动执行npm start来执行打包，webpack不会实时更新修改。

webpack-dev-server

webpack-dev-server：一个服务器插件，相当于webpack+apache，启动一个web服务并实时更新修改
启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。
将package.json中script字段修改为

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

webpack.config.js中output字段修改为：

output: {
        filename: 'bundle.js',
        publicPath: 'dist'
    },

其中publicPath如果不指定，运行项目之后，访问localhost:8080即可，
如果指定为dist，则应访问localhost:8080/dist

此时为了对比，先删除dist目录，再执行npm start
执行完之后发现，项目目录中并没有生成dist目录，但是访问localhost:8080/dist也可以访问到index.html页面。当修改文件后，会实时更新，不需要再次执行命令
这里写图片描述

二者的区别

webpack不会实时更新修改，就只是一个打包工具，webpack-dev-server会实时自动更新修改
webpack打包输出路径，output字段为path，webpack-dev-server打包输出路径，output字段为publicPath(此值为空时默认是项目根目录)
webpack打包输出的文件，是真的存在于物理地址path中，而webpack-dev-server打包输出的文件，是保存在内存中的，在项目目录中是找不到的。

webpack-dev-server较webpack的优势

尽管webpack提供了命令webpack –watch来动态监听文件的改变并实时打包，但
- 文件多了打包速度会很慢，
- 且这样的打包的方式不能做到hot replace，即每次webpack编译之后，你还需要手动刷新浏览器。

webpack-dev-server克服了webpack的以上两个问题，webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来服务资源文件（默认在当前目录下，可通过content-base指定）。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，而是保存在内存中。

我想说的话

学习进步离不开网友的支持，希望大家以后多多支持，能够指出文中不足与疑惑的点，我会为大家一一解答。有兴趣的小伙伴可以加入QQ群：852590787