Software-Dev-Server

简介

webpack 工具集，基于最新主版本 webpack。集成常用 loader、plugin，默认设置经过性能和效率优化，支持自定义设置，参考配置选项。

安装

npm i software-dev-server --save-dev

使用指南

step1：添加服务运行脚本
  在package.json添加scripts，如下
    "dev": "dev-server --mode=development",
    "build": "dev-server --mode=production",
    "analyzer": "dev-server --mode=analyzer"

step2：添加postcss配置
  在package.json添加browserslist，如下
    "browserslist": {
      "production": [
        "defaults",
        "not dead",
        "> 1%",
        "last 3 versions",
        "iOS >= 12",
        "Android >= 10",
        "IE >= 10",
        "Chrome >= 91",
        "Edge >= 15",
        "Safari >= 12",
        "Firefox >= 91"
      ]
    }

    在项目根目录下创建postcss.config.js，内容如下
      module.exports = {
        plugins: {
          'postcss-pxtorem': {
            rootValue: 16, // rem 相对于 px 转换的基准值
            propList: ['*'], // 需要转换的 CSS 属性，* 表示全部
            unitPrecision: 5, // 转换后的小数位数
          },
          "postcss-preset-env": {
            autoprefixer: {}//自动添加浏览器前缀
          }
        }
      }

step3：添加配置文件

  在项目根目录创建用户自定义配置文件，完整配置如下(不需要配置的字段请不要删除):

    const path = require("path");
    module.exports = {
      customConf: {
        jsType: "js", //项目使用的技术栈
        hasTsx: false, //是否包含.tsx文件
        entry: {
          index: "./examples/index.js",
        },
        htmlEntry: {
          index: "./examples/index.html",
        },
        extensions: [".js", ".json"], //文件后缀名
        devServer: {
          port: 8080, //webpack-dev-server 端口
          static: "", //webpack-dev-server 默认访问的静态目录，默认值根目录 dist
          proxy: {}, //webpack-dev-server 代理
        },
        buildPath: "", //设置生成环境打包输出目录，默认dist,若设置使用绝对路径
        publicPath: "", //线上URL
        // publicPath: "http://localhost:8080/", //线上URL
        alias: {}, //项目中的别名设置
        cache: true, //是否启用webpack缓存
        speed: true, //是否开启webpack运行速度检测
        thread: false, //是否开启loader多线程
        copy: [], //静态资源复制，格式{from: "",to: ""}
        ruleInclude: {
          js: [], //需要loader处理的js文件目录
          css: [], //需要loader处理的css文件目录
          image: [], //需要loader处理的image文件目录
          font: [], //需要loader处理的font文件目录
          media: [], //需要loader处理的音视频文件目录
        },
        devtool: "", // 设置source-map
        performance: {}, //设置performance
        modules: [], //设置loader默认解析的目录，默认是根目录[/node_modules/]
        mainFields: [], //设置依赖包主文件字段，默认['main']
        noParse: [], //设置加载模块不需要解析哪些目录
        plugins: [], //添加自己需要的plugin
        loaders: [], //添加自己需要的loader
        // 设置模块联邦
        moduleFederation: {
          name: "app_main", //当前子应用ID
          filename: "remoteEntry.js", //对外公开的文件名称
          exposes: {
            "./test": "./examples/test.js", //对外公开的接口
          },
          //当前应用依赖其他应用的引用地址
          remotes: {
            module_lib: "app_b@http://localhost:8081/remoteEntry.js",
          },
        },
      },
    };



step4:启动开发模式
  npm run dev

step5:启动构建模式
  npm run build

step4:启动分析模式
  npm run analyzer

运行模式

1. dev:开发模式，用于开发调试
2. build:生产模式，用于构建静态资源，发布线上环境
3. analyzer:分析模式，用于 webpack 性能和运行效率分析

内置 loader

1. babel-loader: preset:
   1. preset-env:编译 ES2015 及以上版本的语法
   2. preset-react:编译 react
   3. preset-typescript:编译 typescript
2. css-loader:css 文件编译
3. style-loader:内联样式编译
4. less-loader:less 文件编译
5. postcss-loader: plugins:
   1. postcss-preset-env:自动添加浏览器前缀
   2. postcss-pxtorem:px 转 rem
6. thread-loader:loader 多线程运行，仅支持 Babel loader 和 Vue loader
7. url-loader/file-loader: 处理文件资源

内置 plugin

1. compression-webpack-plugin:生产模式，gzip 压缩
2. copy-webpack-plugin:复制静态资源
3. css-minimizer-webpack-plugin:生产模式，css 文件压缩
4. html-webpack-plugin:生成 html，支持生成多页应用
5. mini-css-extract-plugin:生产模式，css 提取成独立文件
6. speed-measure-webpack-v5-plugin:分析模式，分析 webpack 运行中耗时的内容
7. webpack-bundle-analyzer:分析模式，分析 webpack 生成的资源体积
8. webpackbar:分析模式，分析构建时的 process，可用来分析内存使用率【当有内存泄漏时，可通过该插件定位过度占用内存的 laoder 或 plugin 等】

配置文件说明

customConf

自定义配置，基于 webpack 配置做扁平化拆分。

1. jsType: 字符串，是以下其中之一，js|ts|react|vue|angular|wxext|rn|electron|koa|chromeext|vscodeext
2. hasTsx: 布尔值，是否包含.tsx 文件【启用意味着 react 项目文件以.tsc 格式开发，且.jsx 和.tsx 不能同时混用】
3. entry:Object，js 入口文件
4. htmlEntry:Object，html 入口文件
5. extensions:数组，文件后缀自动查找
6. devServer:Object，webpack-dev-server 配置【仅支持 port/static/proxy 自定义设置】
7. buildPath:字符串，output 的 path，默认根目录下 dist【通常用在跨端项目集成时自定义 web 项目打包路径】
8. publicPath:字符串，output 的 publicPath
9. alias:Object,目录别名
10. cache:布尔值，是否启用 webpack 缓存,默认启用
11. speed:布尔值，是否启用速度检测，默认关闭【仅在项目运行效率低下时手动开启】
12. gzip: 布尔值，生产模式是否开启 gzip 压缩，默认启用
13. thread:布尔值，是否为启用多线程，默认关闭【仅在项目启动和热更新很慢时手动开启】
14. copy：数组，复制资源文件到 dist 目录
15. ruleInclude:Object，静态资源加载 loader 的 include 目录设置【在 webpack 性能低下时设置，提升查找 module 的性能】
16. devtool:字符串，和 webpack devtool 相同【仅在内置设置无法满足需求时设置】
17. performance:Object，和 webpack performance 相同【仅在内置设置无法满足需求时设置】
18. modules:数组，模块解析目录，默认[/node_modules/]
19. mainFields:数组，依赖包主文件字段，默认['main']
20. noParse:数组，加载模块不需要解析哪些目录
21. plugins:数组，自定义 plugins【仅在内置 plugin 无法满足需求时传入】
22. loaders:数组，自定义 loaders【仅在内置 loader 无法满足需求时传入】
23. ModuleFederation:Object,模块联邦设置，具体参数参考 webpack 官网

常用场景说明

1. 如何启用模块联邦实现简易微前端架构？

step1:每个应用设置 publicPath，确保其他应用能够访问。例如 publicPath: 'http://localhost:8080/'

step2:每个应用设置 moduleFederation，用于定义自身导出文件名称及引用其他应用共享的代码。例如

  moduleFederation: {
    name: "app_main",
    filename: "remoteEntry.js",
    exposes: {
      "./test": "./examples/test.js",
    },
    remotes: {
      "module_lib": "app_lib@http://localhost:8081/remoteEntry.js",
    },
  }
step3:设置webpack JS entry 异步引入
例如，默认entry是index.js,需要新建一个文件bootstrap.js，在此文件中异步引入index.js import('./index')

step4: JS entry 设置为新建的文件bootstrap.js

2. 如何添加 plugin 和 loader?

step1: 安装需要的 NPM 包

npm i clean-webpack-plugin webpack-html-loader

step2: 在项目根目录下的 webpack.config.js 引入需要的 plugin、loader

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlLoader = require('html-loader');

step3: 在配置文件中的 plugins: [] 和 loaders: [] 中添加即可

plugins: [
  new CleanWebpackPlugin(),
],
loaders: [
  {
    test: /\.html$/i,
    loader: 'html-loader',
    exclude: /node_modules/
  },
]

3. 如何提高 webpack 运行速度？

首先，减少不必要的 loader 和 plugin；其次，设置配置文件中提供的专属字段，主要如下

cache:在项目启动和热更新速度较慢时开启webpack缓存，默认开启
cssType:最小量设置，使用了css就设置['css'],使用了css和less就设置['css','less']
extensions:最小量设置，建议只添加其中需要的，.js/.json/.jsx/.tsx/.vue，字段越少webpack查询module速度越快
thread:建议只在项目启动和热更新时间很慢的时候开启
ruleInclude: 建议精确设置js/css/image/video/audio/font 所在的目录，webpack会精确查询module，速度会变快
performance:默认已经关闭performance检测，开启后build运行时间变长
noParse:如果项目中包含了类似jquery之类不经过webpack解析的包，在该字段中设置路径

4. 如何分析项目 webpack 性能和定位问题？

step1: 在配置文件中开启 speed 检测插件功能，设置 speed:true 即可。

step2: 运行 npm run analyzer

step3: 观看控制台中 webpack build 时的进度，同时打开电脑资源任务管理器（Windows）观测 CPU/内存的占用情况

step4: webpack build 结束时，speed 插件会在控制台显示所有的 loader 和 plugin 耗时情况，找出耗时比较久的 loader/plugin，再去定位代码中的问题

step5: webpack build 结束后会弹出资源包性能页面，可查询哪些内容体积较大，再去优化代码

版本说明

1. 1.0.30 删除 MPA 模式，推荐使用模块联邦微前端模式。
2. 1.0.32 新增 loader：url-loader/file-loader;删除内置 loader 中默认设置的 exclude 属性。