webpack中使用WebpackDevServer提升开发效率

·  阅读 733

使用WebpackDevServer提升开发效率

当我们修改webpack文件中的内容之后,每一次都需要我们手动打开命令行输入npm run build重新进行打包,然后手动打开浏览器查看。

我们希望在修改完代码之后直接到浏览器中看到效果。

方法一:

打开package.json文件

//找到scripts
{
	"scripts":{
		"bundle":"webpack"
	}
}
复制代码

修改为如下内容:

{
	"scripts":{
		"watch":"webpack --watch"  //监听webpack,只要发生变化就重新打包
	}
}
复制代码

这时候,我们就会发现,只要我们的代码发生变化,浏览器上就可以直接看到结果。

但是这种方法并不完善。

方法二:(推荐)

1.打开webpack.config.js文件

//新增devServer
devServer : {
	contentBase:'./dist'
}
复制代码

2.打开package.json文件

{
	"scripts":{
		“watch”:"webpack --watch",
		//启动项
		"start":"webpack-dev-server"
		open:true
	}
}
复制代码

3.打开命令行输入

npm install webpack-dev-server -D

4.这个时候我们就会发现 当我们重新修改代码时候 Webpack自动打开浏览器 如果浏览器已经打开 将会自动刷新页面

更多配置:webpack.js.org/configurati…

方法三

我想自己写一个服务器,来帮助我们自动更新浏览器(在node中直接使用Webpack)

1.打开package.json文件

{
	"scripts":{
		“watch”:"webpack --watch",
		"start":"webpack-dev-server",
        //自己配置服务器
		"server":"node server.js"
	}
}
复制代码

2.怎么写服务器?

(1)根目录下创建server.js文件

(2)安装一个express来帮助我们快速搭建服务器

npm install express webpack-dev-middleware -D

(3)打开webpack.config.js文件

output:{
	//所有打包的文件路径前都加一个根路径,确保打包正确
	publicPath:"/"
}
复制代码

(4)编写服务器 server.js

const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config); //编译器

const app = express();

app.use(webpackDevMiddleware(complier,{
    publicPath:config.output.publicPath //输出文件
}))

app.listen(3000,()=>{
	console.log('server id running');
})
复制代码

(5)这时候我们重新运行一下

​ 在命令行输入npm run server

(6)就会发现,浏览器也会自动打包代码,但是并不会重新刷新浏览器

更多配置:webpack.js.org/api/cli/#us…

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改