剧场模式
首页前端Webpackwebpack 3 零基础入门视频教程

webpack 3 零基础入门视频教程 #7 - 初识 webpack-dev-server

求知小风 · 元婴发布于
4

现在我们来学习一个最常用的插件 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 的啦。

先这样吧。

3 条回复
  • sososo · 元婴
    sososo · 元婴 #1

    没有了吗?没有了吗?没有了吗?

  • dragon · 元婴
    dragon · 元婴 #2

    其实我觉得webpack-dev-server 比较重要的一个功能还是热更新,就时改变样式这类的文件时,浏览器端的效果改变不用手动刷新了,会自动刷新。

  • MeliodasSAMAi · 元婴

    怎么那么像live-server

官方服务号
随机课程
React 进阶提高 - 技巧篇 - 第 1 季

React 进阶提高 - 技巧篇 - 第 1 季

33 个视频3 小时 29 分钟中级

Pro¥ 128.00¥ 102.40

React已完结

学员(23)
ttswh2009 · 道祖钮乾坤 · 大乘leaf-yaoyao · 元婴太阳 · 元婴奥特曼🤖 · 元婴lana2020 · 元婴袁勇 · 元婴小杰 · 化神cooltan · 太乙toutou · 元婴dear°学会微笑 · 元婴React-小白 · 合体
最新动态
ttswh2009 · 道祖学习到了6:41
钮乾坤 · 大乘学习到了3:33
leaf-yaoyao · 元婴学习到了2:33
太阳 · 元婴学习到了4:14
奥特曼🤖 · 元婴学习到了6:41
统计信息
    学员: 17811
    视频数量: 1049
    帖子数量: 428

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:117

Top