webpack和webpack-dev-serve

我不是女神ヾ 2024-04-17 05:49 56阅读 0赞

### 文章目录 ###

*   *  webpack-dev-server
     *  二者的区别
     *  webpack-dev-server较webpack的优势

\#\#webpack  
一个模块打包器，根据entry指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。  
每个依赖项随即被处理，最后输出到output字段指定的文件中  
![这里写图片描述][70]  
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目录：  
![这里写图片描述][70 1]  
这里如果修改了文件内容，那需要手动执行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页面。当修改文件后，会实时更新，不需要再次执行命令  
![这里写图片描述][70 2]

## 二者的区别 ##

*  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会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，而是保存在内存中。

[70]: https://img-blog.csdn.net/20180827142049836?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyMDcwMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180827142129838?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyMDcwMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180827144901465?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyMDcwMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70