webpack-dev-server-Webpack零基础入门

当前位置:　首页>> 技术小册>> Webpack零基础入门

现在我们来学习一个最常用的插件 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 也可以看到以前的效果。
![](/uploads/images/20230703/624319d54abbcc96837051913f3b161a.png)
下面是编译后的源码。
![](/uploads/images/20230703/5ed3666565f5fa2cccaf5a51616982ec.png)

默认是运行在 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。

该分类下的相关小册推荐：

Webpack实战：入门、进阶与调优(中)

全解webpack前端开发环境定制

Webpack实战：入门、进阶与调优(上)

Webpack实战：入门、进阶与调优(下)

webpack指南