跳到主要内容

· 阅读需 14 分钟
Oxygen

devServer​

webpack-devServer，一般简称WDS，是 webpack 内置的用于开发环境的服务器配置。webpack本身提供三种方式用于开发环境修改代码以后自动编译，以提高开发效率：

总体来说，WDS 配置最容易，并且提供 HMR 的功能，只需要配置devServer.hot: true就直接启用，方便到了极致！下面就重点看一下 WDS 的proxy配置。

· 阅读需 18 分钟
Oxygen

head标签是在 HTML 的根元素html里的第一个标签，它的内容如下：

  • 允许包含一个title标签，表示文档的标题，显示在浏览器的标签栏上；如果时iframe则可以允许不包含title标签
<head>
  <title>My test page</title>
</head>
  • 最多只能包含一个base标签，给页面上所有的 URL 相对地址提供一个基础路径，因此它会影响全局的链接地址。base是一个非常危险的标签，容易造成跟 JavaScript 的配合问题
  • meta标签
<base target="_top" href="http://www.example.com/">
  • link标签，规定了当前文档与外部资源的关系，例如标识favicon，css等静态资源
<link rel="icon" href="favicon.ico">

<link rel="stylesheet" href="my-css-file.css">
  • style，即直接指定的CSS样式表
<head>
  <style>
    h1 {color:red;}
    p {color:blue;}
  </style>
</head>
  • script标签，但是一般不会至于head中，如果要放在head中一般需要使用async来异步加载资源

· 阅读需 17 分钟
Oxygen

monorepo​

什么是 monorepo​

monorepo这个词是meno和repo两个缩写词的组合，meno是更少的意思，repo是repository的缩写，也就是仓库，合起来就是使用更少的仓库来进行版本管理控制，将所有项目都放在一个代码仓库进行管理。

截止到目前，主流的前端开源项目基本全部使用monorepo，例如react，vue，babel等。