css初始化 webpack配置 vscode设置

CSS初始化

```javascript
* {
  margin: 0;
  padding: 0;
  border: 0;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
legend,
button form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0;
}
/* 酌情修改 */
body {
  background: #fff;
  color: #333;
  font-size: 12px;
  margin-top: 5px;
  font-family: 'SimSun', '微软雅黑', 'Arial Narrow';
}

/* 短引用的内容可取值：''或"" */
q:before,
q:after {
  content: ”;
}

/* 缩写，图片等无边框 */
fieldset,
img,
abbr,
acronym {
  border: 0 none;
}
abbr,
acronym {
  font-variant: normal;
}
legend {
  color: #000;
}

/* 清除特殊标记的字体和字号 */
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-weight: normal;
  font-style: normal;
}

/* 上下标 */
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}

/* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 表格标题及内容居左显示 */
caption,
th {
  text-align: left;
}
input,
img,
select {
  vertical-align: middle;
}
main {
  display: block;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
i {
  font-style: normal;
}
/* 清除列表样式 */
ol,
ul,
li {
  list-style: none;
}

/* 输入控件字体 */
input,
button,
textarea,
select,
optgroup,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

/* 标题元素样式清除 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}

/* 链接样式，颜色可酌情修改 */
del,
ins,
a {
  color: #333;
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  color: #cd0200;
  text-decoration: underline;
}
a:link {
  color: #009;
}
a:visited {
  color: #800080;
}
/* 鼠标样式 */
input[type='submit'] {
  cursor: pointer;
}
button {
  cursor: pointer;
}
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.clear {
  clear: both;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  height: 0;
  content: '';
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
}

webpack配置

// 人物属性
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
  module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.css$/i, // 匹配.css结尾的文件
        use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
        // 从右到左的, 所以不能颠倒顺序
        // css-loader: webpack解析css文件-把css代码一起打包进js中
        // style-loader: css代码插入到DOM上 (style标签)
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      { // 图片文件的配置(仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)$/,
        type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
        // 如果你设置的是asset模式
        // 以8KB大小区分图片文件
        // 小于8KB的, 把图片文件转base64, 打包进js中
        // 大于8KB的, 直接把图片文件输出到dist下
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
        generator: { // 生成文件名字 - 定义规则
          filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', // 使用这个loader处理js文件
          options: { // 加载器选项
            presets: ['@babel/preset-env'] // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
          }
        }
      }
    ],
  },
  devServer: {
    port: 3000,
  },
};

如何提高 webpack 的打包速度？

1. 多入口情况下，使用 optimization.splitChunks来提取公共代码。
2. 通过 externals 配置来提取常用库。
3. 利用 DllPlugin 和DllReferencePlugin 预编译资源模块，通过 DllPlugin 来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin 将编译编译的模块加载进来。
4. 使用 thread-loader 实现多进程加速编译。
5. 使用 terser-webpack-plugin 对js进行代码压缩。
6. 优化 resolve 配置缩小范围。
7. 使用 tree-shaking 和 Scope hoisting 来剔除多余代码。
   如何减少 webpack 打包体积？
8. 使用 externals配置来提取常用库。
9. 使用 tree-sjaking 和 scope hoisting 来剔除多余代码。
10. 使用 optimize-css-assets-webpack-plugin 压缩css。
11. 使用 terser-webpack-plugin 对 js 进行代码压缩。

vscode配置

{
  "emmet.variables": {
    "lang": "zh-CN"
  },
  //覆盖当前所选颜色主题的颜色
  "workbench.iconTheme": "material-icon-theme", // 文件样式图标
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#fffb00", //活动选项卡底部的边框
    "scrollbarSlider.hoverBackground": "#73ff01", //滚动条滑块在悬停时的背景色
    "focusBorder": "#00ccff", //焦点元素的整体边框颜色
    "editorCursor.foreground": "#fb7dbe", // 编辑器光标颜色
    "activityBar.background": "#2c2b2b", // 活动栏背景色
  },
  //替代编辑器语法颜色
  "editor.tokenColorCustomizations": {
    "comments": "#077903", // 注释
    "functions": "#a10169", // 函数方法定义与引用颜色
    "keywords": "#0096facb", // 关键字颜色，如new, if, else, try等
    "strings": "#aa2c6b", // 字符串的颜色
    "types": "#c32f79", // 类型定义与引用的颜色
    "variables": "#bd737c", // 变量的颜色
    "numbers": "#01eaffae", // 数字
    "textMateRules": [
      {
        "scope": "entity.name.tag", // HTML 标签
        "settings": {
          "foreground": "#ff1e65a0"
        }
      },
      {
        "scope": "storage.type", // const let var =>
        "settings": {
          "foreground": "#fb3698"
        }
      },
      {
        "scope": "keyword.operator", // 运算符号(+-*/=) 逻辑符号(&& || !)
        "settings": {
          "foreground": "#ff65b2"
        }
      },
      {
        "scope": "punctuation.definition.string", // 单双引号
        "settings": {
          "foreground": "#A65B64"
        }
      },
    ]
  },
  "eslint.format.enable": true, // 开启eslint检测
  "eslint.run": "onType", // eslint检测方式
  "eslint.probe": [
    // 对哪些文件进行检测
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ],
  "editor.hover.enabled": false, // 鼠标放在代码上不提示信息  控制是否显示悬停提示。
  "editor.tabSize": 2, // 缩进几个字符
  "editor.fontSize": 14, // 代码字体大小
  "editor.formatOnSave": true, // 在保存时自动格式化文件
  "editor.linkedEditing": true, // 每次保存的时候自动格式化
  "editor.formatOnType": true, // 每次保存的时候自动格式化
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 定义函数参数括号前的空格处理方式
  "javascript.preferences.quoteStyle": "single", // 用于快速修复的首选引文样式(始终使用单引号)
  "javascript.format.enable": true, // 当vscode失去焦点时触发保存
  "git.enableSmartCommit": true, // 在没有暂存的更改时提交所有更改
  "breadcrumbs.enabled": true, // 开启 vscode 文件路径导航
  "security.workspace.trust.enabled": true, // 去掉打开时信任提示
  "editor.minimap.showSlider": "always", // 自动保存
  "files.autoSave": "afterDelay", // 控制自动保存未保存的编辑器
}