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", //项目使用的技术栈
    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
    alias: {}, //项目中的别名设置
    cache: true, //是否启用webpack缓存
    speed: true, //是否开启webpack运行速度检测
    thread: false, //是否开启loader多线程
    gzip: true, //生产模式是否开启gzip压缩
    splitChunk: false, //生产模式是否开启代码分片,默认是false，JS/CSS文件名称不再有hash值；开启后为切片名称添加contentHash支持，此处可以配置切片参数，与webpack最新版本参数相同
    hashCount: 10, //生产模式开启代码分片名称contenthash的位数，仅在splitChunk不为false时生效
    copy: [
      {
        from: path.join(process.cwd(), "examples", "favicon.ico"),
        to: path.join(process.cwd(), "dist", "favicon.ico"),
      },
    ], //静态资源复制，格式{from: "",to: ""}
    ruleInclude: {
      js: [path.join(process.cwd(), "examples")], //需要loader处理的js文件目录
      css: [path.join(process.cwd(), "examples")], //需要loader处理的css文件目录
      image: [path.join(process.cwd(), "examples")], //需要loader处理的image文件目录
      font: [path.join(process.cwd(), "examples")], //需要loader处理的font文件目录
      media: [path.join(process.cwd(), "examples")], //需要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",
      },
    },
    //设置babel参数
    babelOptions: {
      presets: [],
      plugins: [],
    },
  },
};

step4:启动开发模式

npm run dev

运行模式

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|react|wxext|electron|koa|chromeext|vscodeext
2. entry:Object，js 入口文件
3. htmlEntry:Object，html 入口文件
4. extensions:数组，文件后缀自动查找
5. devServer:Object，webpack-dev-server 配置【仅支持 port/static/proxy 自定义设置】
6. buildPath:字符串，output 的 path，默认根目录下 dist【通常用在跨端项目集成时自定义 web 项目打包路径】
7. publicPath:字符串，output 的 publicPath
8. alias:Object,目录别名
9. cache:布尔值，是否启用 webpack 缓存,默认启用
10. speed:布尔值，是否启用速度检测，默认关闭【仅在项目运行效率低下时手动开启】
11. gzip: 布尔值，生产模式是否开启 gzip 压缩，默认启用
12. thread:布尔值，是否为启用多线程，默认关闭【仅在项目启动和热更新很慢时手动开启】
13. splitChunk:布尔值|JSON 对象，当为 false 时关闭代码分片功能，当为 true 或 JSON 对象时开启代码分片。splitChunk 与 webpack optimization.splitChunk 参数相同。
14. hashCount:数值，大于等于 10 的整数，contenthash 的位数，仅在 splitChunk 不为 false 时生效。
15. copy：数组，复制资源文件到 dist 目录
16. ruleInclude:Object，静态资源加载 loader 的 include 目录设置【在 webpack 性能低下时设置，提升查找 module 的性能】
17. devtool:字符串，和 webpack devtool 相同【仅在内置设置无法满足需求时设置】
18. performance:Object，和 webpack performance 相同【仅在内置设置无法满足需求时设置】
19. modules:数组，模块解析目录，默认[/node_modules/]
20. mainFields:数组，依赖包主文件字段，默认['main']
21. noParse:数组，加载模块不需要解析哪些目录
22. plugins:数组，自定义 plugins【仅在内置 plugin 无法满足需求时传入】
23. loaders:数组，自定义 loaders【仅在内置 loader 无法满足需求时传入】
24. ModuleFederation:Object,模块联邦设置，具体参数参考 webpack 官网
25. babelOptions:Object，babel 参数设置，需要自定义 babel 配置时设置

常用场景说明

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 结束后会弹出资源包性能页面，可查询哪些内容体积较大，再去优化代码

5. 若首次运行过程中出现 babel 报错提示，怎么处理？

由于 babel loader 没有设置 include 和 exclude，当用户项目根目录下出现 commonJS 脚本就会提示报错，需要在 webpack.config.js 中 设置 ruleInclude.js

版本说明

1. 1.0.30 删除 MPA 模式，推荐使用模块联邦微前端模式。
2. 1.0.32 新增 loader：url-loader/file-loader;删除内置 loader 中默认设置的 exclude 属性。
3. 1.0.40 优化内部配置,新增 splitChunk、hashCount、babelOptions 配置来支持更高的可配置化;
4. 1.0.43 优化内部配置，修复了对 Typescript 的编译异常;