webpack 一套工程代码 管理多个相似项目

项目地址

h5-webp

FOUC

使用webpack打包项目后，css以style内嵌样式的方式放在head里，所以打开出现了短暂的无样式状态。

解决办把就是把css抽离出来，用link的形式引入。抽离css可以用 mini-css-extract-plugin（extract-text-webpack-plugin）。

mini-css-extract-plugin只负责抽离css，并不能压缩css。

webpack中hash、chunkhash和contenthash三者的区别

简单理解：
hash 项目指纹
chunkhash 文件指纹
contenthash 内容（模块）指纹

构建指定项目

存在多个项目时， 怎么做到构建指定项目？

我们希望通过npm run dev 项目名来构建指定项目。

我们知道npm run dev 后的参数会拼接到 dev 脚本定义的命令后面。举个例子：

// package.json
{
    "scripts": {
        "dev": "webpack serve --config webpack.dev.config.js --name"
    },
    ...
}

当我们执行npm run dev 项目名时，实际执行的命令会是 webpack serve --config webpack.dev.config.js --name 项目名。

此时，我们可以通过process.argv来获取’项目名‘字符串。

# process.argv
[
  '/Users/XX/.nvm/versions/node/v20.17.0/bin/node',
  '/Users/XX/jgCloud/h5-webp/node_modules/.bin/webpack',
  'serve',
  '--config',
  'webpack.dev.config.js',
  '--name',
  '项目名'
]

使用该方法有2个弊端:

• –name 是webpack的命令参数，是配置别名的意思，在加载多个配置时使用。在这里借用来传递项目名称，并不符合语义。
• 无法实现一个命令启动多个服务的问题。

so，我们来通过node接收项目参数后来启动webpack服务：

// package.json
{
    "scripts": {
        "dev": "node config/dev.js",
    },
    ...
}

执行npm run dev 项目名1 项目2时，实际执行的命令会是 node config/dev.js 项目名1 项目名2，然后在dev.js中获取项目参数，并启动webpack服务。

// config/dev.js
// 通过process.argv.slice(2) 获取参数
// 通过require('node:child_process').spawn来启动webpack服务