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