webpack提供了一个可选的本地开发服务器 webpack-dev-server
,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
第一步:安装
它是一个单独的模块,在使用之前需要先安装它。
安装:npm install --save-dev [email protected]
我使用的webpack版本是3.6.0,webpack-dev-server的版本是2.9.0
第二步:配置
安装好之后我们需要在webpack.config.js文件中添加 dev-server
进行配置。
选项本身可以设置如下属性:
- contentBase:为哪一个文件夹提供本地服务,这里我填写
./dist
- port:端口号,默认为8080
- inline:控制页面是否实时刷新。取值为true或false,当为true时,修改了代码后页面会自动刷新
- historyApiFallback:在SPA页面中,依赖HTML5的history模式
// webpack.config.js
//...
module.exports = {
// ...其它配置
devServer: {
contentBase:'./dist',
inline:true,
}
}
第三步:使用
此时,如果我们直接在终端中输入 webpack-dev-server
命令,发现报错了:告诉我们找不到这个命令。
原因:不管我们是通过 cmd ,还是编辑器的终端,直接输入命令,就像上边那样,它会去全局中寻找这个命令去执行。但是webpack-dev-server是局部安装(因为我们使用的是 --save-dev
,而不是 -g
),所以在全局中找不到,就报错了。
解决方法:在 package.json
文件的scripts中,添加一条命令:
//package.json文件
"scripts": {
// ...其它命令
"dev": "webpack-dev-server --open" //--open表示执行完命令后自动打开浏览器
}
然后我们使用 npm run dev
命令就可以了
再解释一下scripts中的命令:
- scripts 中定义的都是一些命令,当我们使用
npm run xxx
的时候,就会去package.json文件中的scripts寻找 xxx 命令来执行。接下来会按照一定的顺序寻找命令对应的位置。 - 首先,会在本地的
node_modules/.bin
路径中寻找对应的命令。如果没有找到,会去全局的环境变量中寻找。
注意事项
我的代码目录结构中并没有 dist 文件夹,看不到编译后的文件,但是启动webpack-dev-server后可以正常运行,原因在于实时编译后的文件都保存到了内存当中。