webpack-dev-server
提供了一个简单的 web 服务器,并且能够实时重新加载
通过官方文档各种配置,自己实验了一把,不知道是哪里出了问题,一直实现不了实时加载,后来查阅资料,一个很简单的配置就实现了实时加载,在这里记录一下:
- 需要先初始化
webpack-dev-server
npm install webpack-dev-server --save-dev
注意,如果像上面那样没有指定哪个版本的话就去下载,会下载最新的 webpack-dev-server,坑就在这里,如果你的项目中的 webpack
不是最新的,那么你使用webpack-dev-server起来会有错误的,所以根据你的项目中的webpack版本去下载它,
比如我的项目使用的webpackv3X的版本就下载的是[email protected]的
-
-
在webpack.config.js
中进行配置
1.需要在entry
配置项中配置client
:
本项目的common入口是公用方法,每个页面中都会使用到,所以,需要在每个页面中都能使用的入口文件中去,再填入client
的配置,下面的配置指定了访问的url
entry:{
'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
'index':['./src/page/index/index.js'],
'login':['./src/page/login/index.js']
},
2.修改output
配置:
坑就在这里,大家都知道output
中的path
是打包后文件放置的地方,并不是url访问文件的路径,而热更新需要提供出一个url访问文件的路径,所以还需要在多加一个 publicPath
,对应的是url的路径
output:{
path:path.resolve(__dirname, 'dist'),//存放文件的路径
publicPath:'/dist/',//访问文件的路径,这里的根路径是根据url来的,比如访问http://localhost:8088/dist/,那么就是对应/dist/
filename:'js/[name].js'
},
- 在命令行输入
如果想像下面那样输入命令的话,你要确保你在全局安装过webpack-dev-server
webpack-dev-server --inline --port 8088
之后就在浏览器中打开http://localhost:8088/
就能实现实时加载了
截止到这一步,仅仅是简单的实现了自动刷新,但是并不能满足日常的开发
webpack-dev-server自动刷新,只是我们在开发时候需要的一个工具;
而在上面的entry
,入口配置中,配置了
'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
打包的时候也会把入口的本地url打包到线上,显然是没有用的
解决方法:
在Node.js中,可以进行环境变量配置
那么接着打开刚刚修改好的webpack.config.js
- 配置一个环境变量,这个变量取值是
dev
或online
// 环境变量配置,取值dev 或online
let WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
const configs = {............
2.然后更改一下entry
配置项,去掉写死的url
const configs = {
entry:{
'common':['./src/page/common/index.js'],
'index':['./src/page/index/index.js'],
'login':['./src/page/login/index.js']
},
.......
}
3.更改 output
配置
output:{
path:path.resolve(__dirname, 'dist'),
//更改的此处
publicPath:'dev' === WEBPACK_ENV ? '/dist/' : '',
filename:'js/[name].js'
},
4.在configs输出之前,对之前声明的WEBPACK_ENV
的值判断一下
如果是开发环境,那么我们就配置url读取路径
if('dev' === WEBPACK_ENV){
configs.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
关键来了,WEBPACK_ENV是如何赋值的呢?
我们在启动这个项目的时候去赋值的,
输入命令行,启动项目并赋值给WEBPACK_ENV
npm run set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088
这一大串的命令行真的看上去很讨厌,
在package.json
"scripts": {
"dev": "set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088",
"build": "webpack"
},
之后就可以愉快的输入命令
npm run dev