@mpxjs/webpack-plugin 2.7.0-beta.3 → 2.7.0-beta.7

package/lib/dependencies/CommonJsVariableDependency.js

@@ -41,13 +41,10 @@ CommonJsVariableDependency.Template = class CommonJsVariableDependencyTemplate e
     dep,
     source,
     {
-      module,
       runtimeTemplate,
       moduleGraph,
       chunkGraph,
-      runtimeRequirements,
-      runtime,
-      initFragments
+      runtimeRequirements
     }
   ) {
     if (!dep.name) return
@@ -60,9 +57,7 @@ CommonJsVariableDependency.Template = class CommonJsVariableDependencyTemplate e
       runtimeRequirements
     })
 
-    requireExpr = `/* mpx cjs variable */ var ${dep.name} = ` + requireExpr
-
-    source.insert(0, requireExpr)
+    source.insert(0, `/* mpx cjs variable */ var ${dep.name} = ${requireExpr};\n`)
   }
 }
 

package/lib/dependencies/DynamicEntryDependency.js

@@ -20,7 +20,8 @@ class DynamicEntryDependency extends NullDependency {
   }
 
   get key () {
-    return `${this.resource}_${this.entryType}_${this.outputPath}_${this.packageRoot}_${this.relativePath}_${this.range[0]}_${this.range[1]}`
+    const { resource, entryType, outputPath, packageRoot, relativePath, range } = this
+    return [resource, entryType, outputPath, packageRoot, relativePath, ...range].join('|')
   }
 
   addEntry (compilation, callback) {
@@ -45,6 +46,9 @@ class DynamicEntryDependency extends NullDependency {
       resultPath = toPosix(path.relative(relativePath, resultPath))
     }
 
+    // export类型的resultPath需要添加.js后缀
+    if (entryType === 'export') resultPath += '.js'
+
     if (alreadyOutputed) return callback(null, { resultPath })
 
     if (packageRoot) {

package/lib/dependencies/{RecordStaticResourceDependency.js → RecordResourceMapDependency.js}

@@ -1,28 +1,32 @@
 const NullDependency = require('webpack/lib/dependencies/NullDependency')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
 
-class RecordStaticResourceDependency extends NullDependency {
-  constructor (resourcePath, outputPath, packageRoot = '') {
+class RecordResourceMapDependency extends NullDependency {
+  constructor (resourcePath, resourceType, outputPath, packageRoot = '') {
     super()
     this.resourcePath = resourcePath
+    this.resourceType = resourceType
     this.outputPath = outputPath
     this.packageRoot = packageRoot
   }
 
   get type () {
-    return 'mpx record static resource'
+    return 'mpx record resource map'
   }
 
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
     const packageName = this.packageRoot || 'main'
-    mpx.staticResourcesMap[packageName][this.resourcePath] = this.outputPath
+    const resourceMap = mpx[`${this.resourceType}sMap`] || mpx.otherResourcesMap
+    const subResourceMap = resourceMap.main ? resourceMap[packageName] : resourceMap
+    subResourceMap[this.resourcePath] = this.outputPath
     return callback()
   }
 
   serialize (context) {
     const { write } = context
     write(this.resourcePath)
+    write(this.resourceType)
     write(this.outputPath)
     write(this.packageRoot)
     super.serialize(context)
@@ -31,17 +35,18 @@ class RecordStaticResourceDependency extends NullDependency {
   deserialize (context) {
     const { read } = context
     this.resourcePath = read()
+    this.resourceType = read()
     this.outputPath = read()
     this.packageRoot = read()
     super.deserialize(context)
   }
 }
 
-RecordStaticResourceDependency.Template = class RecordStaticResourceDependencyTemplate {
+RecordResourceMapDependency.Template = class RecordResourceMapDependencyTemplate {
   apply () {
   }
 }
 
-makeSerializable(RecordStaticResourceDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordStaticResourceDependency')
+makeSerializable(RecordResourceMapDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordResourceMapDependency')
 
-module.exports = RecordStaticResourceDependency
+module.exports = RecordResourceMapDependency

package/lib/dependencies/RemoveEntryDependency.js

@@ -0,0 +1,40 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RemoveEntryDependency extends NullDependency {
+  constructor (entryName) {
+    super()
+    this.entryName = entryName
+  }
+
+  get type () {
+    return 'mpx remove entry'
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.entryName)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.entryName = read()
+    super.deserialize(context)
+  }
+
+  mpxAction (module, compilation, callback) {
+    const { entryName } = this
+    compilation.entries.delete(entryName)
+    return callback()
+  }
+}
+
+RemoveEntryDependency.Template = class RemoveEntryDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RemoveEntryDependency, '@mpxjs/webpack-plugin/lib/dependencies/RemoveEntryDependency')
+
+module.exports = RemoveEntryDependency

package/lib/dependencies/ResolveDependency.js

@@ -37,8 +37,13 @@ class ResolveDependency extends NullDependency {
 
   // resolved可能会动态变更，需用此更新hash
   updateHash (hash, context) {
-    const resolved = this.getResolved()
-    if (resolved) hash.update(resolved)
+    this.resolved = this.getResolved()
+    const { resource, issuerResource, compilation } = this
+    if (this.resolved) {
+      hash.update(this.resolved)
+    } else {
+      compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
+    }
     super.updateHash(hash, context)
   }
 
@@ -68,12 +73,8 @@ ResolveDependency.Template = class ResolveDependencyTemplate {
   }
 
   getContent (dep) {
-    const { resource, issuerResource, compilation } = dep
+    const { resolved = '', compilation } = dep
     const publicPath = compilation.outputOptions.publicPath || ''
-    const resolved = dep.getResolved()
-    if (!resolved) {
-      compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
-    }
     return JSON.stringify(publicPath + resolved)
   }
 }

package/lib/extractor.js

@@ -3,9 +3,9 @@ const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
 const toPosix = require('./utils/to-posix')
 const fixRelative = require('./utils/fix-relative')
-const normalize = require('./utils/normalize')
 const addQuery = require('./utils/add-query')
 const { MPX_DISABLE_EXTRACTOR_CACHE, DEFAULT_RESULT_SOURCE } = require('./utils/const')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 
 module.exports = content => content
 
@@ -37,10 +37,10 @@ module.exports.pitch = async function (remainingRequest) {
   })
 
   let request = remainingRequest
-  // static的情况下需要添加recordLoader记录相关静态资源的输出路径
+  // static的情况下需要记录相关静态资源的输出路径
   if (isStatic) {
-    const recordLoader = normalize.lib('record-loader')
-    request = `${recordLoader}!${remainingRequest}`
+    const packageRoot = queryObj.packageRoot || ''
+    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', file, packageRoot))
   }
 
   let content = await this.importModule(`!!${request}`)

package/lib/file-loader.js

@@ -2,7 +2,7 @@ const path = require('path')
 const loaderUtils = require('loader-utils')
 const toPosix = require('./utils/to-posix')
 const parseRequest = require('./utils/parse-request')
-const RecordStaticResourceDependency = require('./dependencies/RecordStaticResourceDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 
 module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
@@ -28,7 +28,7 @@ module.exports = function loader (content, prevOptions) {
     const { resourcePath, queryObj } = parseRequest(this.resource)
     const packageRoot = queryObj.packageRoot || ''
     url = outputPath = toPosix(path.join(packageRoot, outputPath))
-    this._module.addPresentationalDependency(new RecordStaticResourceDependency(resourcePath, outputPath, packageRoot))
+    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', outputPath, packageRoot))
   }
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`

package/lib/helpers.js

@@ -60,6 +60,7 @@ module.exports = function createHelpers (loaderContext) {
     switch (type) {
       case 'json':
         options.asScript = true
+        if (part.useJSONJS) options.useJSONJS = true
       // eslint-disable-next-line no-fallthrough
       case 'styles':
       case 'template':

package/lib/index.js

@@ -24,10 +24,11 @@ const PackageEntryPlugin = require('./resolver/PackageEntryPlugin')
 // const RequireHeaderDependency = require('webpack/lib/dependencies/RequireHeaderDependency')
 // const RemovedModuleDependency = require('./dependencies/RemovedModuleDependency')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
-const RecordStaticResourceDependency = require('./dependencies/RecordStaticResourceDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 const RecordGlobalComponentsDependency = require('./dependencies/RecordGlobalComponentsDependency')
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
+const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
@@ -106,20 +107,20 @@ const externalsMap = {
 const warnings = []
 const errors = []
 
-class EntryNode {
-  constructor (options) {
-    this.request = options.request
-    this.type = options.type
-    this.module = null
-    this.parents = new Set()
-    this.children = new Set()
-  }
-
-  addChild (node) {
-    this.children.add(node)
-    node.parents.add(this)
-  }
-}
+// class EntryNode {
+//   constructor (options) {
+//     this.request = options.request
+//     this.type = options.type
+//     this.module = null
+//     this.parents = new Set()
+//     this.children = new Set()
+//   }
+//
+//   addChild (node) {
+//     this.children.add(node)
+//     node.parents.add(this)
+//   }
+// }
 
 class MpxWebpackPlugin {
   constructor (options = {}) {
@@ -177,6 +178,7 @@ class MpxWebpackPlugin {
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
     }
+    options.customOutputPath = options.customOutputPath || null
     this.options = options
   }
 
@@ -184,35 +186,59 @@ class MpxWebpackPlugin {
     if (options.transRpx) {
       warnings.push('Mpx loader option [transRpx] is deprecated now, please use mpx webpack plugin config [transRpxRules] instead!')
     }
-    return { loader: normalize.lib('loader'), options }
+    return {
+      loader: normalize.lib('loader'),
+      options
+    }
   }
 
   static nativeLoader (options = {}) {
-    return { loader: normalize.lib('native-loader'), options }
+    return {
+      loader: normalize.lib('native-loader'),
+      options
+    }
   }
 
   static wxssLoader (options) {
-    return { loader: normalize.lib('wxss/loader'), options }
+    return {
+      loader: normalize.lib('wxss/loader'),
+      options
+    }
   }
 
   static wxmlLoader (options) {
-    return { loader: normalize.lib('wxml/loader'), options }
+    return {
+      loader: normalize.lib('wxml/loader'),
+      options
+    }
   }
 
   static pluginLoader (options = {}) {
-    return { loader: normalize.lib('json-compiler/plugin'), options }
+    return {
+      loader: normalize.lib('json-compiler/plugin'),
+      options
+    }
   }
 
   static wxsPreLoader (options = {}) {
-    return { loader: normalize.lib('wxs/pre-loader'), options }
+    return {
+      loader: normalize.lib('wxs/pre-loader'),
+      options
+    }
   }
 
   static urlLoader (options = {}) {
-    return { loader: normalize.lib('url-loader'), options }
+    return {
+      loader: normalize.lib('url-loader'),
+      options
+    }
   }
 
   static fileLoader (options = {}) {
-    return { loader: normalize.lib('file-loader'), options }
+    return {
+      loader: normalize.lib('file-loader'),
+      options
+    }
   }
 
   runModeRules (data) {
@@ -359,7 +385,7 @@ class MpxWebpackPlugin {
     })
 
     compiler.hooks.compilation.tap('MpxWebpackPlugin ', (compilation, { normalModuleFactory }) => {
-      NormalModule.getCompilationHooks(compilation).loader.tap('MpxWebpackPlugin', (loaderContext, module) => {
+      NormalModule.getCompilationHooks(compilation).loader.tap('MpxWebpackPlugin', (loaderContext) => {
         // 设置loaderContext的minimize
         if (isProductionLikeMode(compiler.options)) {
           loaderContext.minimize = true
@@ -387,8 +413,11 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(FlagPluginDependency, new NullFactory())
       compilation.dependencyTemplates.set(FlagPluginDependency, new FlagPluginDependency.Template())
 
-      compilation.dependencyFactories.set(RecordStaticResourceDependency, new NullFactory())
-      compilation.dependencyTemplates.set(RecordStaticResourceDependency, new RecordStaticResourceDependency.Template())
+      compilation.dependencyFactories.set(RemoveEntryDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RemoveEntryDependency, new RemoveEntryDependency.Template())
+
+      compilation.dependencyFactories.set(RecordResourceMapDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordResourceMapDependency, new RecordResourceMapDependency.Template())
 
       compilation.dependencyFactories.set(RecordGlobalComponentsDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordGlobalComponentsDependency, new RecordGlobalComponentsDependency.Template())
@@ -436,7 +465,6 @@ class MpxWebpackPlugin {
           // todo es6 map读写性能高于object，之后会逐步替换
           vueContentCache: new Map(),
           currentPackageRoot: '',
-          wxsMap: {},
           wxsContentMap: {},
           assetsInfo: new Map(),
           forceUsePageCtor: this.options.forceUsePageCtor,
@@ -464,25 +492,6 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          getEntryNode: (request, type, module) => {
-            const entryNodesMap = mpx.entryNodesMap
-            const entryModulesMap = mpx.entryModulesMap
-            if (!entryNodesMap[request]) {
-              entryNodesMap[request] = new EntryNode({
-                type,
-                request
-              })
-            }
-            const currentEntry = entryNodesMap[request]
-            if (currentEntry.type !== type) {
-              compilation.errors.push(`获取request为${request}的entryNode时类型与已有节点冲突, 当前获取的type为${type}, 已有节点的type为${currentEntry.type}!`)
-            }
-            if (module) {
-              currentEntry.module = module
-              entryModulesMap.set(module, currentEntry)
-            }
-            return currentEntry
-          },
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
@@ -494,6 +503,15 @@ class MpxWebpackPlugin {
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
           },
+          getOutputPath: (resourcePath, type, { ext = '', conflictPath = '' } = {}) => {
+            const name = path.parse(resourcePath).name
+            const hash = mpx.pathHash(resourcePath)
+            const customOutputPath = this.options.customOutputPath
+            if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext)
+            if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
+            return path.join(type, name + hash + ext)
+          },
           extractedFilesCache: new Map(),
           getExtractedFile: (resource, { error } = {}) => {
             const cache = mpx.extractedFilesCache.get(resource)
@@ -505,8 +523,7 @@ class MpxWebpackPlugin {
               file = 'plugin.json'
             } else if (isStatic) {
               const packageRoot = queryObj.packageRoot || ''
-              const resourceName = path.parse(resourcePath).name
-              file = toPosix(path.join(packageRoot, type, resourceName + mpx.pathHash(resourcePath) + typeExtMap[type]))
+              file = toPosix(path.join(packageRoot, mpx.getOutputPath(resourcePath, type, { ext: typeExtMap[type] })))
             } else {
               const appInfo = mpx.appInfo
               const pagesMap = mpx.pagesMap
@@ -580,16 +597,15 @@ class MpxWebpackPlugin {
               if (currentResourceMap[resourcePath] === outputPath) {
                 alreadyOutputed = true
               } else {
-                currentResourceMap[resourcePath] = outputPath
-                // 输出冲突检测只有page需要
-                if (resourceType === 'page') {
-                  for (let key in currentResourceMap) {
-                    if (currentResourceMap[key] === outputPath && key !== resourcePath) {
-                      error && error(new Error(`Current ${resourceType} [${resourcePath}] registers a same output path [${outputPath}] with existed ${resourceType} [${key}], which is not allowed!`))
-                      break
-                    }
+                // 输出冲突检测，如果存在输出路径冲突，对输出路径进行重命名
+                for (let key in currentResourceMap) {
+                  if (currentResourceMap[key] === outputPath && key !== resourcePath) {
+                    outputPath = toPosix(path.join(packageRoot, mpx.getOutputPath(resourcePath, resourceType, { conflictPath: outputPath })))
+                    warn && warn(new Error(`Current ${resourceType} [${resourcePath}] is registered with a conflict outputPath [${currentResourceMap[key]}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+                    break
                   }
                 }
+                currentResourceMap[resourcePath] = outputPath
               }
             } else if (!currentResourceMap[resourcePath]) {
               currentResourceMap[resourcePath] = true
@@ -611,8 +627,9 @@ class MpxWebpackPlugin {
         async.forEach(presentationalDependencies.filter((dep) => dep.mpxAction), (dep, callback) => {
           dep.mpxAction(module, compilation, callback)
         }, (err) => {
-          if (err) return callback(err)
-          rawProcessModuleDependencies.call(compilation, module, callback)
+          rawProcessModuleDependencies.call(compilation, module, (innerErr) => {
+            return callback(err || innerErr)
+          })
         })
       }
 
@@ -685,17 +702,6 @@ class MpxWebpackPlugin {
         }
       })
 
-      // todo 统一通过dep+mpx actions处理
-      compilation.hooks.stillValidModule.tap('MpxWebpackPlugin', (module) => {
-        const buildInfo = module.buildInfo
-        if (buildInfo.pagesMap) {
-          Object.assign(mpx.pagesMap, buildInfo.pagesMap)
-        }
-        if (buildInfo.componentsMap && buildInfo.packageName) {
-          Object.assign(mpx.componentsMap[buildInfo.packageName], buildInfo.componentsMap)
-        }
-      })
-
       compilation.hooks.finishModules.tap('MpxWebpackPlugin', (modules) => {
         // 自动跟进分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
@@ -726,6 +732,14 @@ class MpxWebpackPlugin {
         return source
       })
 
+      JavascriptModulesPlugin.getCompilationHooks(compilation).renderStartup.tap('MpxWebpackPlugin', (source, module) => {
+        if (module && mpx.exportModules.has(module)) {
+          source = new ConcatSource(source)
+          source.add('module.exports = __webpack_exports__;\n')
+        }
+        return source
+      })
+
       compilation.hooks.beforeModuleAssets.tap('MpxWebpackPlugin', () => {
         const extractedAssetsMap = new Map()
         for (const module of compilation.modules) {
@@ -956,8 +970,6 @@ class MpxWebpackPlugin {
           chunkLoadingGlobal
         } = compilation.outputOptions
 
-        const { chunkGraph } = compilation
-
         function getTargetFile (file) {
           let targetFile = file
           const queryStringIdx = targetFile.indexOf('?')
@@ -1023,6 +1035,7 @@ try {
     context.setTimeout = setTimeout;
     context.JSON = JSON;
     context.Math = Math;
+    context.Date = Date;
     context.RegExp = RegExp;
     context.Infinity = Infinity;
     context.isFinite = isFinite;
@@ -1037,17 +1050,28 @@ try {
     context.ArrayBuffer = ArrayBuffer;
     context.Symbol = Symbol;
     context.Reflect = Reflect;
+    context.Object = Object;
+    context.Error = Error;
+    context.Array = Array;
+    context.Float32Array = Float32Array;
+    context.Float64Array = Float64Array;
+    context.Int16Array = Int16Array;
+    context.Int32Array = Int32Array;
+    context.Int8Array = Int8Array;
+    context.Uint16Array = Uint16Array;
+    context.Uint32Array = Uint32Array;
+    context.Uint8ClampedArray = Uint8ClampedArray;
+    context.String = String;
+    context.Function = Function;
+    context.SyntaxError = SyntaxError;
+    context.decodeURIComponent = decodeURIComponent;
+    context.encodeURIComponent = encodeURIComponent;
   }
 } catch(e){
 }\n`)
             source.add(originalSource)
             source.add(`\nmodule.exports = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}];\n`)
           } else {
-            const entryModules = chunkGraph.getChunkEntryModulesIterable(chunk)
-            const entryModule = entryModules && entryModules[0]
-            if (entryModule && mpx.exportModules.has(entryModule)) {
-              source.add('module.exports =\n')
-            }
             source.add(originalSource)
           }
 
@@ -1124,7 +1148,7 @@ try {
                 if (loader.loader.includes(info[0])) {
                   loader.loader = info[1]
                 }
-                if (loader.loader === info[1]) {
+                if (loader.loader.includes(info[1])) {
                   insertBeforeIndex = index
                 }
               })
@@ -1159,41 +1183,43 @@ try {
               loader: extractorPath
             })
           }
-
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
-          createData.request = stringifyLoadersAndResource(loaders, createData.resource)
         }
 
-        // const mpxStyleOptions = queryObj.mpxStyleOptions
-        // const firstLoader = (data.loaders[0] && data.loaders[0].loader) || ''
-        // const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher.js')
-        // let cssLoaderIndex = -1
-        // let vueStyleLoaderIndex = -1
-        // let mpxStyleLoaderIndex = -1
-        // data.loaders.forEach((loader, index) => {
-        //   const currentLoader = loader.loader
-        //   if (currentLoader.includes('css-loader')) {
-        //     cssLoaderIndex = index
-        //   } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader.js')) {
-        //     vueStyleLoaderIndex = index
-        //   } else if (currentLoader.includes('@mpxjs/webpack-plugin/lib/style-compiler/index.js')) {
-        //     mpxStyleLoaderIndex = index
-        //   }
-        // })
-        // if (mpxStyleLoaderIndex === -1) {
-        //   let loaderIndex = -1
-        //   if (cssLoaderIndex > -1 && vueStyleLoaderIndex === -1) {
-        //     loaderIndex = cssLoaderIndex
-        //   } else if (cssLoaderIndex > -1 && vueStyleLoaderIndex > -1 && !isPitcherRequest) {
-        //     loaderIndex = vueStyleLoaderIndex
-        //   }
-        //   if (loaderIndex > -1) {
-        //     data.loaders.splice(loaderIndex + 1, 0, {
-        //       loader: normalize.lib('style-compiler/index.js'),
-        //       options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
-        //     })
-        //   }
-        // }
+        if (mpx.mode === 'web') {
+          const mpxStyleOptions = queryObj.mpxStyleOptions
+          const firstLoader = (loaders[0] && loaders[0].loader) || ''
+          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher')
+          let cssLoaderIndex = -1
+          let vueStyleLoaderIndex = -1
+          let mpxStyleLoaderIndex = -1
+          loaders.forEach((loader, index) => {
+            const currentLoader = loader.loader
+            if (currentLoader.includes('css-loader')) {
+              cssLoaderIndex = index
+            } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader')) {
+              vueStyleLoaderIndex = index
+            } else if (currentLoader.includes(styleCompilerPath)) {
+              mpxStyleLoaderIndex = index
+            }
+          })
+          if (mpxStyleLoaderIndex === -1) {
+            let loaderIndex = -1
+            if (cssLoaderIndex > -1 && vueStyleLoaderIndex === -1) {
+              loaderIndex = cssLoaderIndex
+            } else if (cssLoaderIndex > -1 && vueStyleLoaderIndex > -1 && !isPitcherRequest) {
+              loaderIndex = vueStyleLoaderIndex
+            }
+            if (loaderIndex > -1) {
+              loaders.splice(loaderIndex + 1, 0, {
+                loader: styleCompilerPath,
+                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+              })
+            }
+          }
+        }
+
+        createData.request = stringifyLoadersAndResource(loaders, createData.resource)
         // 根据用户传入的modeRules对特定资源添加mode query
         this.runModeRules(createData)
       })