使用WebpackDevServer提升开发效率
我们修改代码,如果想在浏览器上正确运行,都需要手动打包npm run bundle
,这样的话我们的开发效率是非常低下的,我们希望,如果改了src下面的原代码,那么dist目录就会自动打包,那么就简单多了,不用每次都运行npm run bundle
了。
要想实现这样的功能,有三种做法
方法一:webpack --watch
打开package.json文件,当我们运行npm run bundle
的时候,实际上是在运行webpack命令,我们可以给它加一个watch
"scripts": {
"bundle": "webpack --watch"
},
然后执行npm run bundle
,之后修改src下面的内容。都会自动执行npm run bundle
当加了一个watch参数的时候,是什么意思呢?意思是webpack会帮助我们去监听打包的文件,只要打包的文件发生变化,就会自动的重新打包。
我们想要在第一次运行npm run bundle
的时候,自动帮我们实现打包并且把浏览器打开,同时还可以模拟一些服务器上的特性,这样的话通过package.json配置 webpack --watch就不行了
方法二:webpack-dev-server
借助WebpackDevServer来帮助我们实现
安装WebpackDevServer,npm install webpack-dev-server -D
在webpack.config.js中配置devServer
devServer: {
contentBase: './dist'
},
配置一个最基础的contentBase,意思是服务器要起在哪一个文件夹下,因为打包生成的文件都会放在dist目录下,所以要借助webpack devServer帮我们起一个服务器,这个服务器的根路径在当前目录的dist文件下,当做了devServer的配置,再去package.json中脚本去加webpack-dev-server
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server"
},
运行 npm run start
告诉我们已经帮助我们起了一个服务器叫 http://localhost:8080/,我们可以直接去访问这个地址,显示出我们的项目,这个时候修改index.js的内容,可以被webpack监听到,不需要重新执行npm run start
,webpack-dev-server的好处是,不仅可以监听到文件发生改变重新帮我们打包,还会自动帮助我们重新刷新浏览器,所以用它可以更方便的提升代码开发的效率。
方法三:自己做一个服务器
在devServer不成熟的时候,都是靠自己配置,(现在devServer很成熟了,可以不用靠自己配置)
在package.json中的脚本加一个名为middleware的配置
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0",
"middleware": "node server.js"
},
当运行npm run middleware
,想自己写一个服务器,这个服务器如果监听到src目录下的内容有改变,会向webpack-dev-server一样,自动帮助我们重启服务器,更新网页上的内容,那么怎么去写这样一个server.js呢
首先在跟目录创建一个server.js
要创建一个server的服务器,要在node的环境下,需要安装express,帮助我们快速的搭建一个服务器,这个服务器要监听webpack的变化,帮助重新打包,所以还要借助一个webpack的中间开发件webpack-dev-middleware
1.安装这两个插件:npm install express webpack-dev-middleware -D
2.在webpack.config.js做配置:
output: {
publicPath: '/',
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
在output中加上 publicPath: '/',
,表示的是所有打包生成的文件前面的引用都加一个根路径,确认打包生成的路径不会有问题
3.写server.js:
首先引入express、webpack
然后起一个node的服务器,用express创建一个服务器实例,让这个实例监听3000端口,端口号自己来定,可以写一个回调函数,监听成功会执行。
4.运行`npm run middleware
我们已经在3000端口启动一个服务器了
5. 引入webpackDevMiddleware和webpack.config.js(webpack的配置文件)和complier(webpack的编译器)
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config.js')
const comlier = webpack(config)
7.app是一个express的实例,可以使用中间件,通过use
app.use(webpackDevMiddleware(comlier), {
publicPath: config.output.publicPath
})
意思是只要文件发生改变了,complier编译器就会重新运行,重新运行的文件对应的打包输出的内容publicPath就是config.output.publicPath
8.运行`npm run middleware
修改文件,可以重新打包了,但是没有帮助我们实时刷新,事实上要自己写一个server要花费很大的精力,推荐用devServer来实现。
补充:
1.为什么要开这样一个服务器呢?
有时候我们在前端要去写ajax请求,如果是直接通过文件的形式打开,就不可以发送ajax请求了,因为你想发ajax请求,要求所在的index.html必须在一个服务器上,通过http协议的方式打开。通过file协议的方式打开肯定是不行的,这就是为什么我们要借助webpack-dev-server来帮助启动一个web服务器
当我们使用vue和react项目都知道,都会帮助我们开启一个服务器,这个服务器大部分都是使用webpack-dev-server。
proxy: 配置,帮助我们做跨域接口模拟的时候要使用的接口代理
为什么在vue和react中可以使用proxy这个接口代理呢,因为他们的底层都使用了devServer
官网: DOCUMENTATION---->CONFIGURATION—>DevServer
2.devServer配置
devServer: {
contentBase: './dist',
open: true, // 在启动DevServer的时候,自动帮我们打开浏览器,
// 然后自动的访问服务器的地址
proxy: {
'api': 'http://localhost:3000' // 如果用户访问api这个地址,也就是访问locahost:8000下面的api这个路 径,会直接帮我们转发到locahost:3000这个地址,之所以之前的脚手架都可以这样配置,是因为底层使用了devServer
},
port: 8090, // 设置端口号
host: "0.0.0.0"
},
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0"
},
可以通过IP地址访问
3.总结
三个简化开发的方式
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0",
"middleware": "node server.js"
},0
第一个方式是借助webpack --watch,会监测到要打包的代码发生了变化,会自动的帮我们执行打包,但是不会帮我们起一个服务器,意味着这种方式的打包没办去去做ajax的请求,而且每次打包完成之后,需要重新刷新浏览器。
第二种方法是webpack-dev-server,这是应用最广泛的方法。我们安装完webpack-dev-derver之后,在webpack.config.js配置devServer,然后运行项目就会帮助我们启动一个服务器,帮助我们打包代码,还会帮助我们自动的刷新浏览器。
第三种方法是手写了一个类似于webpack-dev-server的内容,运行middleware的时候实际上是运行了一个server.js文件,在node中直接使用webpack
官网:DOCUMENTATION—>API—>Comand Line Interface 查看webpack在命令行中命令
DOCUMENTATION—>API—>Node.js API 在node中去运行webpack,这是一些使用接口
DOCUMENTATION—>GUIDES—>Development