ant design pro v5 获取动态菜单与基于角色权限管理视频教程 准备更新中
世界上最伟大的投资就是投资自己的教育
现在我们来学习一个最常用的插件 webpack-dev-server
,一般来说,这个插件,大家都会用,特别是开发环境下。
我们之前使用 webpack -d --watch
来在开发环境下编译静态文件,但是这个功能,完全可以用 webpack-dev-server
来代替。
除此之外, webpack-dev-server
还有其他的功能,比如在本地上开启服务,打开浏览器等。
这节我们主要来简单体验一下 webpack-dev-server
的功能。
# 先全局安装
$ npm install -g webpack-dev-server
$ npm install --save-dev webpack-dev-server
然后运行命令:
$ webpack-dev-server
现在我们用浏览器打开 localhost:8080
也可以看到以前的效果。
下面是编译后的源码。
默认是运行在 8080
端口,这个我们可以改。
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
...
devServer: {
port: 9000
},
...
};
我们还可以配置一运行 webpack-dev-server
的时候就自动打开浏览器。
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
...
devServer: {
port: 9000,
open: true
},
...
};
以后都会一直用 webpack-dev-server
的啦。
先这样吧。
1Freewebpack 3 零基础入门视频教程 #1 - 介绍
2Freewebpack 3 零基础入门视频教程 #2 - 安装
3Freewebpack 3 零基础入门视频教程 #3 - 实现 hello world
4Freewebpack 3 零基础入门视频教程 #4 - webpack 的配置文件 webpack.config.js
5Freewebpack 3 零基础入门视频教程 #5 - 使用第一个 webpack 插件 html-webpack-plugin
6Freewebpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass
Freewebpack 3 零基础入门视频教程 #7 - 初识 webpack-dev-server
8Freewebpack 3 零基础入门视频教程 #8 - 用 webpack 和 babel 配置 react 开发环境
9Freewebpack 3 零基础入门视频教程 #9 - 用 clean-webpack-plugin 来清除文件
10Freewebpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件
11Freewebpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板
12Freewebpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
© 汕尾市求知科技有限公司 | 关注我们 | 在线学员:1134
粤公网安备 44152102000088号 | 粤ICP备19038915号
没有了吗?没有了吗?没有了吗?
其实我觉得webpack-dev-server 比较重要的一个功能还是热更新,就时改变样式这类的文件时,浏览器端的效果改变不用手动刷新了,会自动刷新。
怎么那么像live-server