前端工程化

FixEcho
87 阅读2分钟

NodeJS

浏览器和NodeJS架构区别

NodeJS架构

NodeJS的应用场景

  • 应用一：目前前端开发的库都是以node包的形式进行管理；
  • 应用二：npm、yarn、pnpm工具成为前端开发使用最多的工具；
  • 应用三：越来越多的公司使用Node.js作为web服务器开发、中间件、代理服务器；
  • 应用四：大量项目需要借助Node.js完成前后端渲染的同构应用；
  • 应用五：资深前端工程师需要为项目编写脚本工具（前端工程师编写脚本通常会使用JavaScript，而不是Python或者shell）；
  • 应用六：很多企业在使用Electron来开发桌面应用程序；

特殊的全局对象

常见的全局对象

模块的加载过程

ES Module的解析过程

阶段一:构建阶段

阶段二和三:实例化阶段-求值阶段

依赖的版本管理

npm install原理

局部命令的执行

硬连接和软连接的概念

path常见的API

Webpack

webpack和webpack-cli的关系

loader配置方式

打包less

  • package.json
"devDependencies": {
  "css-loader": "^6.7.1",
  "less-loader": "^11.0.0",
  "postcss-loader": "^7.0.0",
  "postcss-preset-env": "^7.7.2",
  "style-loader": "^3.3.1",
  "webpack": "^5.73.0",
  "webpack-cli": "^4.10.0"
}
  • webpack.config.js
const path = require("path")

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build")
  },
  module: {
    rules: [
      {
        // 告诉webpack匹配什么文件
        test: /.css$/,
        // use: [ // use中多个loader的使用顺序是从后往前
        //   { loader: "style-loader" },
        //   { loader: "css-loader" }
        // ],
        // 简写一: 如果loader只有一个
        // loader: "css-loader"
        // 简写二: 多个loader不需要其他属性时, 可以直接写loader字符串形式
        use: [ 
          "style-loader",
          "css-loader", 
          "postcss-loader"
          // {
          //   loader: "postcss-loader",
          //   options: {
          //     postcssOptions: {
          //       plugins: [
          //         "autoprefixer"
          //       ]
          //     }
          //   }
          // }
        ]
      },
      {
        test: /.less$/,
        use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ]
      }
    ]
  }
}
  • postcss.config.js
module.exports = {
  plugins: [
    "postcss-preset-env"
  ]
}

// px -> rem/vw

认识asset module type

asset module type的使用

url-loader的limit效果

babel-preset

resolve模块解析

extensions和alias配置

认识Plugin

CleanWebpackPlugin

HtmlWebpackPlugin

Mode配置

为什么要搭建本地服务器

webpack-dev-server

认识模块热替换(HMR)

开启HMR

框架的HMR

host配置

port、open、compress

Proxy(Vue项目学习)

changeOrigin的解析(Vue项目学习)

historyApiFallback(Vue项目学习)

代码

const path = require("path")
const { VueLoaderPlugin } = require("vue-loader/dist/index")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require("webpack")

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    clean: true
    // assetModuleFilename: "abc.png"
  },
  resolve: {
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
    alias: {
      utils: path.resolve(__dirname, "./src/utils")
    }
  },
  devServer: {
    hot: true,
    // host: "0.0.0.0",
    // port: 8888,
    // open: true
    // compress: true
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [ "style-loader", "css-loader", "postcss-loader" ]
      },
      {
        test: /.less$/,
        use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ]
      },
      {
        test: /.(png|jpe?g|svg|gif)$/,
        // 1.打包两张图片, 并且这两张图片有自己的地址, 将地址设置到img/bgi中
        // 缺点: 多图片加载的两次网络请求
        // type: "asset/resource",

        // 2.将图片进行base64的编码, 并且直接编码后的源码放到打包的js文件中
        // 缺点: 造成js文件非常大, 下载js文件本身消耗时间非常长, 造成js代码的下载和解析/执行时间过长
        // type: "asset/inline"

        // 3.合理的规范:
        // 3.1.对于小一点的图片, 可以进行base64编码
        // 3.2.对于大一点的图片, 单独的图片打包, 形成url地址, 单独的请求这个url图片
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024
          }
        },
        generator: {
          // 占位符
          // name: 指向原来的图片名称
          // ext: 扩展名
          // hash: webpack生成的hash
          filename: "img/[name]_[hash:8][ext]"
        }
      },
      {
        test: /.js$/,
        use: [
          { 
            loader: "babel-loader", 
            // options: {
            //   plugins: [
            //     "@babel/plugin-transform-arrow-functions",
            //     "@babel/plugin-transform-block-scoping"
            //   ]
            // } 
          }
        ]
      },
      {
        test: /.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    // new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "电商项目",
      template: "./index.html"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      coderwhy: "'why'",
      counter: "123"
    })
  ]
}

Git

集中式版本控制

分布式版本控制

Git的配置分类

Git的配置选项

文件状态的划分

Git的校验和

查看提交历史

版本回退

管理远程仓库

远程仓库的交互

常见的开源协议

Git标签-创建标签

Git标签-删除和检出tag

Git提交对象原理

查看和删除分支

远程分支的管理

rebase和merge的选择

Git常见命令速查表

avatar
文章
阅读
粉丝