webpack-devserver

发表于 | 分类于

​ webpack-dev-server是一个使用了express的Http服务器，它的作用主要是为了监听资源文件的改变，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时的进行编译。

contentBase

​ 配置主要指定服务器资源的根目录，如果不手动设置的话，contentBase默认是当前的执行目录，webpack.config.js所有的根目录。

webpack配置代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './js/main.js',
  output: {
    filename: 'bundle.js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 使用正则去匹配要用该loader转换的css文件
        test: /\.css$/,
        loaders: ExtractTextPlugin.extract({
          // 转换 .css文件需要使用的Loader
          use: ['css-loader']
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }
    ]
  },
  resolve: {
    // modules: ['plugin', 'js']
  },
  plugins: [
    new ExtractTextPlugin({
      // 从js文件中提取出来的 .css文件的名称
      filename: `main.css`
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist")
  }
};

如上配置完成后，我们再运行 npm run dev, 再在地址栏中 运行 http://localhost:8080/ 后看到bundle.js文件，服务器不再指向项目的根目录，而是dist文件夹，http://localhost:8080/bundle.js 可以访问bundle.js文件内容。

port

该配置属性指定了开启服务器的端口号

1
2
3
4
5
6
moudle.exports = {
    devServer:{
        contentBase: path.join(__dirname,'dist'),
        post:8081
    }
}

配置完成后，运行打包命令 npm run dev ,我们就可以通过 如下地址 http://localhost:8081/ 也可以访问了

host

​ 该配置项用于配置 DevServer的服务器监听地址。比如想让局域网的其他设备访问自己的本地服务，则可以在启动DevServer时带上 –host 0.0.0.0（局域网内所有的可用接口） host的默认值是 127.0.0.1（本机）

1
2
3
4
5
6
7
moudle.exports = {
    devServer:{
        contentBase: path.join(__dirname,'dist'),
        post:8081,
        host: '0.0.0.0'
    }
}

headers

​ 该配置项可以在HTTP响应中注入一些HTTP响应头,协商好的自定义响应头。

1
2
3
4
5
6
7
8
9
10
moudle.exports = {
    devServer:{
        contentBase: path.join(__dirname,'dist'),
        post:8081,
        host: '0.0.0.0',
        headers:{
            'X-foo':'123456'
        }
    }
}

historyApiFallback

​ 该配置项属性是用来应对返回404页面时定向跳转到特定页面的。一般是应用在 HTML5中History API 的单页应用，比如在访问路由时候，访问不到该路由的时候，会跳转到index.html页面。(historyApiFallback为true )； 如果需要配置详细的路径，我们可以通过正则来配置页面路由，比如访问以/user 开头的其他页面发生错误，跳转到 user.html，访问 /home 开头不存在的页面，跳转到home.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
moudle.exports = {
    devServer:{
        contentBase: path.join(__dirname,'dist'),
        post:8081,
        host: '0.0.0.0',
        headers:{
            'X-foo':'123456'
        },
        //historyApiFallback: true // 为true 跳转到index.html
    	historyApiFallback：{
        	// 使用正则来匹配路由
          rewrites: [
            { from: /^\/user/, to: '/user.html' },
            { from: /^\/home/, to: '/home.html' }
		  ]
    	}
    }
}

hot

​ 该配置项是指模块替换换功能，DevServer 默认行为是在发现源代码被更新后通过自动刷新整个页面来做到实时预览的，但是开启模块热替换功能后，它是通过在不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的。我们可以在 devServer中 配置 hot: true 即可:

1
2
3
4
5
module.exports = {
    devServer:{
        hot: true
    }
}

也可以在scripts命令行中配置，--hot

1
2
3
4
5
6
{
    "scripts": {
      "dev": "webpack-dev-server --progress --colors --devtool source-map --hot --inline",
      "build": "webpack --progress --colors"
    }
}

inline

webpack-dev-server 有两种模式可以实现自动刷新和模块热替换机制。

iframe

页面是被嵌入到一个iframe页面，并且在模块变化的时候重载页面。

1
2
3
4
5
6
7
8
9
10
module.exports = {
  devServer: {
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    inline: false
  },
}

如上代码配置 inline: false 就是使用iframe模式来重载页面了。

inline 模式

开启模式，只需要把上面的配置代码变为 inline: true即可，它在构建变化后的代码会通过代理客户端来控制网页刷新。

open

该属性用于DevServer启动且第一次构建完成时，自动使用我们的系统默认浏览器去打开网页。

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    open: true
  }

当我们运行完成 npm run dev 打包的时候，会自动打开默认的浏览器来查看网页。

overlay

该属性是用来在编译出错的时候，在浏览器页面上显示错误信息。该属性值默认为false，需要的话，设置该参数为true。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    open: true,
    overlay: true
  }
}

stats(字符串)

该属性配置是用来在编译的时候再命令行中输出的内容，该属性值可以有如下值：

stats: ‘none’ | ‘errors-only’ | ‘minimal’ | ‘normal’ | ‘verbose’

compress

该属性是一个布尔型的值，默认为false，当他为true的时候，它会对所有服务器资源采用gzip进行压缩。

proxy 实现跨域

​ 有时候我们使用webpack在本地启动服务器的时候，由于我们使用的访问的域名是 http://localhost:8081 这样的，但是我们服务端的接口是其他的，那么就存在域名或端口号跨域的情况下，但是很幸运的是 devServer有一个叫proxy配置项，可以通过该配置来解决跨域的问题.

​ 假如现在我们本地访问的域名是 http://localhost:8081, 但是我现在调用的是百度页面中的一个接口，该接口地址是：http://news.baidu.com/widget?ajax=json&id=ad。现在我们只需要在devServer中的proxy的配置就可以了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
module.exports = {
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    port: '8081',
    inline: true,
    open: true,
    overlay: true,
    stats: 'errors-only',
    proxy: {
      '/api': {
        target: 'http://news.baidu.com', // 目标接口的域名
        // secure: true,  // https 的时候 使用该参数
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/api' : ''  // 重写路径
        }
      }
    }
  }
}

调用接口时：

1
2
3
4
5
import axios from 'axios';

axios.get('/api/widget?ajax=json&id=ad').then(res => {
  console.log(res);
});
-------------本文结束感谢您的阅读-------------