修复样式修改 hot reload 不生效的问题

src/bin.ts

@@ -111,7 +111,12 @@ function applyArgv(argv: yargs.Arguments) {
   }
 
   if (argv.BUILD_ENV) {
-    setEnv(argv.BUILD_ENV as Env)
+    const value = argv.BUILD_ENV as Env
+    if (!Object.values(Env).includes(value)) {
+      logger.warn('Invalid BUILD_ENV value:', value)
+    } else {
+      setEnv(argv.BUILD_ENV as Env)
+    }
   }
 }
 
@@ -121,7 +126,7 @@ function handleError(e: unknown) {
   } else {
     e && logger.error(e)
   }
-  logger.fatal('encountered error, exit 1')
+  logger.fatal('Encountered error, exit 1')
   process.exit(1)
 }
 

src/prepare.ts

@@ -15,7 +15,7 @@ export default async function prepare(){
   if (typeof builderVersionRange === 'string') {
     const builderVersion = packageInfo.version as string
     if (!semver.satisfies(builderVersion, builderVersionRange)) {
-      logger.warn(`builder version not satisfied, which may causes error (expected \`${builderVersionRange}\`, got \`${builderVersion}\`)`)
+      logger.warn(`Builder version not satisfied, which may causes error (expected \`${builderVersionRange}\`, got \`${builderVersion}\`)`)
     }
   }
 }

src/utils/build-env.ts

@@ -9,7 +9,7 @@ export enum Env {
   Prod = 'production'
 }
 
-let env: Env = process.env.BUILD_ENV as Env
+let env = (process.env.BUILD_ENV || Env.Dev) as Env
 
 /** Get build env */
 export function getEnv() {

src/webpack/index.ts

@@ -105,23 +105,24 @@ export async function getConfig(): Promise<Configuration> {
 
   const staticDirCopyPlugin = getStaticDirCopyPlugin(buildConfig)
 
-  const miniCssExtractPlugin = new MiniCssExtractPlugin({
-    filename: 'static/[name]-[contenthash].css',
-    chunkFilename: 'static/[id]-[chunkhash].css'
-  })
-
-  if (getNeedAnalyze()) {
-    config = appendPlugins(config, new BundleAnalyzerPlugin())
-  }
-
   config = appendPlugins(
     config,
     ...htmlPlugins,
     definePlugin,
-    staticDirCopyPlugin,
-    miniCssExtractPlugin
+    staticDirCopyPlugin
   )
 
+  if (getEnv() === Env.Prod) {
+    config = appendPlugins(config, new MiniCssExtractPlugin({
+      filename: 'static/[name]-[contenthash].css',
+      chunkFilename: 'static/[id]-[chunkhash].css'
+    }))
+  }
+
+  if (getNeedAnalyze()) {
+    config = appendPlugins(config, new BundleAnalyzerPlugin())
+  }
+
   return config
 }
 

src/webpack/transform.ts

@@ -148,13 +148,13 @@ function addTransform(
       const transformConfig = (transform.config || {}) as TransformStyleConfig
       const loaders: LoaderInfo[] = []
 
-      // // 测试时无需 style-loader
-      // if (getEnv() !== Env.Test) {
-      //   loaders.push({ loader: 'style-loader' })
-      // }
-
-      // TODO: 确认是否需要在测试时干掉
-      loaders.push({ loader: MiniCssExtractPlugin.loader })
+      if (getEnv() === Env.Dev) {
+        loaders.push({ loader: 'style-loader' })
+      } else if (getEnv() === Env.Prod) {
+        // dev 环境不能用 MiniCssExtractPlugin.loader
+        // 已知 less with css-module 的项目，样式 hot reload 会有问题
+        loaders.push({ loader: MiniCssExtractPlugin.loader })
+      }
 
       loaders.push({
         loader: 'css-loader',