Code Monkey home page Code Monkey logo

Comments (5)

savioryu avatar savioryu commented on June 13, 2024

webpack-mpvue-asset-plugin 作为 mpvue 的资源路径解析插件,处理依赖模块的引用,增加了 require(xxx) 的代码,为什么会对 UglifyJsPluginSourceMap 造成影响呢?

    entryChunk.files.forEach(filePath => {
      const assetFile = compilation.assets[filePath]
      const extname = path.extname(filePath)
      let content = assetFile.source()

      chunks.reverse().forEach(chunk => {
        chunk.files.forEach(subFile => {
          if (path.extname(subFile) === extname && assetFile) {
            let relativePath = upath.normalize(relative(filePath, subFile))

            // 百度小程序 js 引用不支持绝对路径,改为相对路径
            if (extname === '.js') {
              relativePath = getRelativePath(relativePath)
            }

            if (/^(\.wxss)|(\.ttss)|(\.acss)|(\.css)$/.test(extname)) {
              relativePath = getRelativePath(relativePath)
              content = `@import "${relativePath}";\n${content}`
            } else if (!(/^\.map$/.test(extname))) {
              content = `require("${relativePath}")\n${content}`
            }
          }
        })
        assetFile.source = () => content
      })
    })

======================================================================================
2021-02-07 更新

MpvuePlugin.prototype.apply = compiler => compiler.plugin('emit', emitHandle)

问题出在插件是在 emit 阶段执行的,即准备生成文件时注入了 require(xxx) 的代码,生成 sourceMap 的环节之前已经完成了

from mpvue.

GendSmith avatar GendSmith commented on June 13, 2024

所以得让生成sourcemap这个步骤后置对吧

from mpvue.

savioryu avatar savioryu commented on June 13, 2024

解决思路:针对入口区块(entryChunk) 的 entryChunk.files 中的 .map 文件做处理, chunk 数对应插入的 require 代码行数,即添加相应数量的分号。

修改后的 webpack-mpvue-asset-plugin 如下:

const path = require('path')
const upath = require('upath')
const relative = require('relative')

const getRelativePath = (filePath) => {
  if (!/^\.(\.)?\//.test(filePath)) {
    filePath = `./${filePath}`
  }
  return filePath
}

const emitHandle = (compilation, callback) => {
  Object.keys(compilation.entrypoints).forEach(key => {
    const { chunks } = compilation.entrypoints[key]
    const entryChunk = chunks.pop()

    entryChunk.files.forEach(filePath => {
      const assetFile = compilation.assets[filePath]
      const extname = path.extname(filePath)
      let content = assetFile.source()

      chunks.reverse().forEach(chunk => {
        chunk.files.forEach(subFile => {
          if (path.extname(subFile) === extname && assetFile) {
            let relativePath = upath.normalize(relative(filePath, subFile))

            // 百度小程序 js 引用不支持绝对路径,改为相对路径
            if (extname === '.js') {
              relativePath = getRelativePath(relativePath)
            }

            if (/^(\.wxss)|(\.ttss)|(\.acss)|(\.css)$/.test(extname)) {
              relativePath = getRelativePath(relativePath)
              content = `@import "${relativePath}";\n${content}`
            } else if (!(/^\.map$/.test(extname))) {
              content = `require("${relativePath}")\n${content}`
            }
          }
        })
        assetFile.source = () => content
      })

      if ((/^\.map$/.test(extname))) {
        content = JSON.parse(content)
        content.mappings = new Array(chunks.length).fill(';').join('') + content.mappings
        content = JSON.stringify(content)
        assetFile.source = () => content
      }

    })

  })
  callback()
}

function MpvuePlugin() {}
MpvuePlugin.prototype.apply = compiler => compiler.plugin('emit', emitHandle)

module.exports = MpvuePlugin

from mpvue.

ohyeahhh avatar ohyeahhh commented on June 13, 2024

所以最后怎么解决的

from mpvue.

ANT-CYJ avatar ANT-CYJ commented on June 13, 2024

from mpvue.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.