webpack 3 零基础入门教程 #7 – webpack-dev-server 就是这么简单

现在我们来学习一个最常用的插件 webpack-dev-server ,一般来说,这个插件,大家都会用,特别是开发环境下。

我们之前使用 webpack -d --watch 来在开发环境下编译静态文件,但是这个功能,完全可以用 webpack-dev-server 来代替。

除此之外, webpack-dev-server 还有其他的功能,比如在本地上开启服务,打开浏览器等。

这节我们主要来简单体验一下 webpack-dev-server 的功能。

$ npm install --save 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 的啦。

先这样吧。

稀土掘金稿源:稀土掘金 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » webpack 3 零基础入门教程 #7 – webpack-dev-server 就是这么简单

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录