Comments (5)
webpack-mpvue-asset-plugin
作为 mpvue
的资源路径解析插件,处理依赖模块的引用,增加了 require(xxx)
的代码,为什么会对 UglifyJsPlugin
的 SourceMap
造成影响呢?
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.
所以得让生成sourcemap这个步骤后置对吧
from mpvue.
解决思路:针对入口区块(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.
所以最后怎么解决的
from mpvue.
from mpvue.
Related Issues (20)
- 子组件如何向父组件传值,$emit没用
- 如何创建1.x版本的新项目
- 建议支持一下华为的快应用!
- scroll-view 下拉刷新refresherrefresh有问题怎么解决
- 项目是不是已经停更了?已经没人维护了? HOT 3
- 子组件中 v-for绑定@click 无效
- mpvue camera 扫码识别时间无效
- 坑太多..... HOT 34
- 最后吐槽一次 HOT 8
- computed
- computed属性未使用,getter方法却被调用
- 请问mpvue可以引用@babel的相关插件吗,想使用一些链式运算符,但是babel版本太低不能使用 HOT 2
- 小白的角度来说:有能力并且喜欢这个框架的人就去fork另外一份去维护,没能力维护或者没精力就别喷了,相互理解
- Mpvue引入百度地图API在小程序报错
- 用npm install 安装的第三方 引用后 会有各个平台的兼容性问题吗 HOT 1
- 微信开发者工具中页面样式错乱,该怎么解决? HOT 1
- test
- test
- 无法安装 vue-cli · Failed to download repo mpvue/mpvue-quickstart: unable to verify the first certificate HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mpvue.