diff --git a/lib/template-compiler/index.js b/lib/template-compiler/index.js index 9dfacd8..bd993b9 100644 --- a/lib/template-compiler/index.js +++ b/lib/template-compiler/index.js @@ -16,7 +16,11 @@ module.exports = function (html) { var vueOptions = this.options.__vueOptions__ || {} var options = loaderUtils.getOptions(this) || {} - var defaultModules = [transformRequire(options.transformToRequire)] + var defaultModules = [transformRequire(options.transformToRequire, { + outputPath: this.options.output.path, + resourcePath: this.resourcePath + })] + var userModules = vueOptions.compilerModules || options.compilerModules // for HappyPack cross-process use cases if (typeof userModules === 'string') { diff --git a/lib/template-compiler/modules/transform-require.js b/lib/template-compiler/modules/transform-require.js index 7d9be15..b144265 100644 --- a/lib/template-compiler/modules/transform-require.js +++ b/lib/template-compiler/modules/transform-require.js @@ -1,50 +1,59 @@ // vue compiler module for transforming `:` to `require` +var fs = require('fs') +var path = require('path') +var mkdirp = require('mkdirp') + var defaultOptions = { img: 'src', image: 'xlink:href' } -module.exports = userOptions => { +module.exports = (userOptions, fileOptions) => { var options = userOptions ? Object.assign({}, defaultOptions, userOptions) : defaultOptions return { postTransformNode: node => { - transform(node, options) + transform(node, options, fileOptions) } } } -function transform (node, options) { +function transform (node, options, fileOptions) { for (var tag in options) { if (node.tag === tag && node.attrs) { var attributes = options[tag] if (typeof attributes === 'string') { - node.attrs.some(attr => rewrite(attr, attributes)) + rewrite(node.attrsMap, attributes, fileOptions) } else if (Array.isArray(attributes)) { - attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item))) + attributes.forEach(item => rewrite(node.attrsMap, item, fileOptions)) } } } } -function rewrite (attr, name) { - if (attr.name === name) { - var value = attr.value - var isStatic = value.charAt(0) === '"' && value.charAt(value.length - 1) === '"' - if (!isStatic) { - return - } - var firstChar = value.charAt(1) - if (firstChar === '.' || firstChar === '~') { - if (firstChar === '~') { - var secondChar = value.charAt(2) - value = '"' + value.slice(secondChar === '/' ? 3 : 2) - } - attr.value = `require(${value})` +function rewrite (attrsMap, name, fileOptions) { + var value = attrsMap[name] + if (value) { + var firstChar = value.charAt(0) + if (firstChar === '.') { + // 资源路径 + var assetPath = path.resolve(path.dirname(fileOptions.resourcePath), value) + // 重写路径,为了避免重名,在webpack输出目录下新建copy-asset目录,资源保存到这里 + var assetOutputPath = path.join('copy-asset', path.relative(process.cwd(), assetPath).replace(/^src/, '')) + attrsMap[name] = `/${assetOutputPath.split(path.sep).join('/')}` + copyAsset(assetPath, path.resolve(fileOptions.outputPath, assetOutputPath)) } - return true } } + +function copyAsset (from, to) { + var readStream = fs.createReadStream(from) + mkdirp(path.dirname(to), err => { + if (err) console.error(err) + var writeStream = fs.createWriteStream(to) + readStream.pipe(writeStream) + }) +} diff --git a/package.json b/package.json index 2ed3fc2..286c586 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "js-beautify": "^1.6.14", "loader-utils": "^1.1.0", "lru-cache": "^4.1.1", + "mkdirp": "^0.5.1", "postcss": "^6.0.6", "postcss-load-config": "^1.1.0", "postcss-selector-parser": "^2.0.0", @@ -90,9 +91,8 @@ "lint-staged": "^4.0.2", "marked": "^0.3.6", "memory-fs": "^0.4.1", - "mkdirp": "^0.5.1", - "mpvue-template-compiler": "^1.0.7", "mocha": "^3.4.2", + "mpvue-template-compiler": "^1.0.7", "node-libs-browser": "^2.0.0", "normalize-newline": "^3.0.0", "null-loader": "^0.1.1",