diff --git a/src/index.js b/src/index.js
index fbec04e..b3d4145 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,12 +4,14 @@
   parseScript,
   parseStyle,
   parseTemplate,
-  parseWeexFile
+  parseWeex
 } from './parser'
+import { getFilenameByPath } from './util'
 import * as config from './config'
 import * as legacy from './legacy'
+import { ScriptMap } from './map'
 
-function partedLoader (type, loader, params, source) {
+function partedLoader (type, loader, params, source, map) {
   let promise
   switch (type) {
     case 'js':
@@ -29,7 +31,8 @@
       break
     case 'we':
     default:
-      promise = parseWeexFile(loader, params, source)
+      map.enable()
+      promise = parseWeex(loader, params, source, map)
       break
   }
   return promise
@@ -45,15 +48,23 @@
     resourcePath: this.resourcePath
   }
   const type = params.loaderQuery.type || 'we'
-  const promise = partedLoader(type, this, params, source)
+  const { resourcePath } = params
+  const filename = getFilenameByPath(resourcePath)
+  const map = new ScriptMap(filename, source)
+
+  const promise = partedLoader(type, this, params, source, map)
 
   promise.then(result => {
+    if (map.enabled) {
+      map.parse()
+    }
     if (type === 'style' || type === 'css' ||
       type === 'html' || type === 'tpl' || type === 'template') {
       result = 'module.exports=' + result
     }
-    callback(null, result)
+    callback(null, result, map.toJSON())
   }).catch(err => {
+    // console.error(err.stack)
     this.emitError(err.toString())
     callback(err.toString(), '')
   })
diff --git a/src/map.js b/src/map.js
new file mode 100644
index 0000000..b859690
--- /dev/null
+++ b/src/map.js
@@ -0,0 +1,109 @@
+import { SourceMapGenerator } from 'source-map'
+
+export class ScriptMap {
+  constructor (filename, content) {
+    this.filename = filename
+    this.content = content
+    const generator = new SourceMapGenerator()
+    generator.setSourceContent(filename, content)
+    this.generator = generator
+    this.history = []
+    this.elements = {}
+    this.enabled = false
+  }
+
+  enable () {
+    this.enabled = true
+  }
+
+  start () {
+    if (!this.enabled) { return }
+    this.current = { elements: [], scripts: [] }
+  }
+
+  end () {
+    if (!this.enabled) { return }
+    const current = this.current
+    this.current = {}
+
+    // re-order the elements and scripts into history
+    const length = current.elements.length
+    if (length > 0) {
+      const children = this.history.splice(-length, length)
+      current.children = children
+    }
+
+    current.elements.concat(current.scripts).forEach(item => {
+      current.name = item.name
+      delete item.name
+    })
+
+    current.elements.forEach((info, index) => {
+      current.children[index].length = info.length
+      current.children[index].line = info.line
+    })
+
+    delete current.elements
+    this.history.push(current)
+  }
+
+  addElement (name, index, line, length) {
+    if (!this.enabled) { return }
+    this.current.elements.push({ name, index, line, length })
+  }
+
+  addScript (name, info, externalOffset) {
+    if (!this.enabled) { return }
+    this.current.scripts.push({ name, info, externalOffset })
+  }
+
+  setElementPosition (name, line, column) {
+    if (!this.enabled) { return }
+    this.elements[name] = { line, column }
+  }
+
+  parse (target, startLine) {
+    if (!this.enabled) { return }
+    target = target || this.history[0]
+    if (!target) { return }
+    startLine = startLine || 0
+
+    const { name, line, scripts, children } = target
+    const elInfo = this.elements[name] || {};
+
+    (scripts || []).forEach(script => {
+      const { info, externalOffset } = script
+      const { original, generated } = info
+      const scriptLength = info.length
+      this.add(
+        original.line + (elInfo.line || 1) - 1,
+        scriptLength,
+        generated.line + startLine + (line || 1) - 1 + externalOffset
+      )
+    });
+
+    (children || []).forEach(child => {
+      this.parse(child, startLine + (line || 1) - 1)
+    })
+
+    this.json = true
+  }
+
+  add (originalLine, length, generatedLine) {
+    if (!this.enabled) { return }
+    const option = {
+      source: this.filename,
+      original: { line: originalLine, column: 1 },
+      generated: { line: generatedLine, column: 1 }
+    }
+    for (let i = 0; i < length; i++) {
+      option.original.line = originalLine + i
+      option.generated.line = generatedLine + i
+      this.generator.addMapping(option)
+    }
+  }
+
+  toJSON () {
+    return this.json ? this.generator.toJSON() : null
+  }
+}
diff --git a/src/parser.js b/src/parser.js
index ac1dd76..03b9a80 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -18,14 +18,14 @@
   appendToWarn
 } from './util'
 
-export function parseWeexFile (loader, params, source, deps, elementName) {
+export function parseWeex (loader, params, source, map, deps, elementName) {
   return new Promise(
     // separate source into <element>s, <template>, <style>s and <script>s
     separateBlocks(source, deps || []))
     // pre-parse non-javascript parts
-    .then(preParseBlocks(loader, params, elementName))
+    .then(preParseBlocks(loader, params, map))
     // join blocks together and parse as javascript finally
-    .then(parseBlocks(loader, params, elementName))
+    .then(parseBlocks(loader, params, map, elementName))
 }
 
 function separateBlocks (source, deps) {
@@ -42,7 +42,7 @@
   }
 }
 
-function preParseBlocks (loader, params) {
+function preParseBlocks (loader, params, map) {
   return (blocks) => {
     const { deps, elements, template, styles, scripts, config, data } = blocks
     const promises = [
@@ -60,7 +60,9 @@
       const elPromises = []
       Object.keys(elements).forEach(key => {
         const el = elements[key]
-        elPromises.push(parseWeexFile(loader, params, el.content, deps, el.name))
+        // record original positions of each <element>
+        map.setElementPosition(el.name, el.line, el.column)
+        elPromises.push(parseWeex(loader, params, el.content, map, deps, el.name))
       })
       promises[0] = Promise.all(elPromises)
     }
@@ -80,7 +82,7 @@
   }
 }
 
-function parseBlocks (loader, params, elementName) {
+function parseBlocks (loader, params, map, elementName) {
   return (results) => {
     const elements = results[0] || []
     const template = results[1]
@@ -94,9 +96,26 @@
     let config = {}
     let data
 
+    const mapOffset = { basic: 0, subs: [] }
+
     if (scripts) {
-      content += scripts.reduce((pre, cur) => {
-        return pre + '\n;' + cur.content
+      // record original and generated position of each <script>
+      // the generated content is begin with empty string
+      // so later the template, styles and elements will be appended/prepended
+      // and mapOffset.basic will record lines of prepended *required* content
+      content += scripts.reduce((prev, next, i) => {
+        // length of previous content
+        const line = prev.split(/\r?\n/g).length + 1
+        const column = 1
+        const oriLine = next.line
+        const oriColumn = next.column
+        mapOffset.subs.push({
+          original: { line: oriLine, column: oriColumn },
+          generated: { line, column },
+          // length of next content
+          length: next.content.split(/\r?\n/g).length
+        })
+        return prev + '\n;' + next.content
       }, '')
     }
 
@@ -105,31 +124,39 @@
       requireContent += deps.map(dep =>
         depHasRequired(content, dep) ? 'require("' + dep + '");' : ''
       ).join('\n')
-      content = requireContent + '\n' + content
+      if (requireContent) {
+        // length of implicitly requires
+        mapOffset.basic = requireContent.split(/\r?\n/g).length
+        content = requireContent + '\n' + content
+      }
     }
 
     if (template) {
+      // append template content, not impact sourcemap
       content += '\n;module.exports.template = module.exports.template || {}' +
         '\n;Object.assign(module.exports.template, ' + template + ')'
     }
 
     if (style) {
+      // append style content, not impact sourcemap
       content += '\n;module.exports.style = module.exports.style || {}' +
         '\n;Object.assign(module.exports.style, ' + style + ')'
     }
 
+    // prepare entry config
     if (configResult) {
       config = new Function('return ' + configResult.content.replace(/\n/g, ''))()
     }
     config.transformerVersion = transformerVersion
     config = JSON.stringify(config, null, 2)
 
+    // prepare entry data
     if (dataResult) {
       data = new Function('return ' + dataResult.content.replace(/\n/g, ''))()
       data = JSON.stringify(data, null, 2)
     }
 
-    return parseScript(loader, params, content, { config, data, elementName, elements })
+    return parseScript(loader, params, content, { config, data, elementName, elements, map, mapOffset })
   }
 }
 
@@ -175,7 +202,7 @@
 }
 
 export function parseScript (loader, params, source, env) {
-  const { config, data, elementName, elements } = env
+  const { config, data, elementName, elements, map, mapOffset } = env
 
   // the entry component has a special resource query and not a sub element tag
   const isEntry = params.resourceQuery.entry === true && !elementName
@@ -185,10 +212,22 @@
     ? md5(source)
     : (elementName || params.resourceQuery.name || getNameByPath(params.resourcePath))
 
+  // join with elements deps
+  // 2 more lines between each element and the end
+  map && map.start()
+  const prefix = (elements || []).reduce((prev, next, index) => {
+    const prevLength = prev.split(/\r?\n/g).length
+    const nextLength = next.split(/\r?\n/g).length
+    // record generated positions of each <element>
+    map && map.addElement(name, index, prevLength, nextLength)
+    return prev + next + ';\n\n'
+  }, '')
+
   // fix data option from an object to a function
   let target = scripter.fix(source)
 
   // wrap with __weex_define__(name, [], (r, e, m) {...})
+  // 1 more line at start, 1 more line at end
   target = target
       .replace(MODULE_EXPORTS_REG, '__weex_module__.exports')
       .replace(REQUIRE_REG, '__weex_require__($1$2$1)')
@@ -196,16 +235,24 @@
       'function(__weex_require__, __weex_exports__, __weex_module__)' +
       '{\n' + target + '\n})'
 
+  // record mapOffset into sourcemap
+  if (mapOffset) {
+    // length of generated prefix (elements) and basic (implicitly requires)
+    const preLines = prefix.split(/\r?\n/g).length + mapOffset.basic
+    mapOffset.subs.forEach(info => {
+      map.addScript(elementName || name, info, preLines)
+    })
+  }
+  map && map.end()
+
   // append __weex_bootstrap__ for entry component
+  // not impact sourcemap
   if (isEntry) {
     target += '\n;__weex_bootstrap__("@weex-component/' + name + '", ' +
         String(config) + ',' +
         String(data) + ')'
   }
 
-  // join with elements deps
-  target = (elements || []).concat(target).join(';\n\n')
-
-  return Promise.resolve(target)
+  return Promise.resolve(prefix + target)
 }
 
diff --git a/src/util.js b/src/util.js
index 3417388..d631779 100644
--- a/src/util.js
+++ b/src/util.js
@@ -10,6 +10,10 @@
   return path.basename(filepath).replace(/\..*$/, '')
 }
 
+export function getFilenameByPath (filepath) {
+  return path.relative('.', filepath)
+}
+
 export const FUNC_START = '#####FUN_S#####'
 export const FUNC_START_REG = new RegExp('["\']' + FUNC_START, 'g')
 export const FUNC_END = '#####FUN_E#####'
diff --git a/test/a.js b/test/a.js
index b8f9f49..574e715 100644
--- a/test/a.js
+++ b/test/a.js
@@ -10,4 +10,4 @@
 }
 
 module.exports.style = require('./a.less');
-module.exports.template = require('./a.tpl');
\ No newline at end of file
+module.exports.template = require('./a.tpl');
diff --git a/test/expect/a.we b/test/expect/a.we
index 2ea3b36..2565076 100644
--- a/test/expect/a.we
+++ b/test/expect/a.we
@@ -24,4 +24,4 @@
         text: 'Hello ' + c.name
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/test/expect/sourcemap.we b/test/expect/sourcemap.we
new file mode 100644
index 0000000..f798f7f
--- /dev/null
+++ b/test/expect/sourcemap.we
@@ -0,0 +1,26 @@
+<element name="foo">
+  <template>
+    <text>Hello</text>
+  </template>
+  <script>
+    console.log(6)
+    console.log(7)
+    console.log(8)
+    console.log(9)
+    console.log(0)
+  </script>
+</element>
+
+<template>
+  <div>
+    <foo></foo>
+  </div>
+</template>
+
+<script>
+  console.log(1)
+  console.log(2)
+  require('../lib/3rd.js')
+  console.log(4)
+  console.log(5)
+</script>
diff --git a/test/lib/3rd.js b/test/lib/3rd.js
index e132ec8..cc00e41 100644
--- a/test/lib/3rd.js
+++ b/test/lib/3rd.js
@@ -1 +1,4 @@
 'Hello 3rd-party JavaScript'
+'Hello 3rd-party JavaScript 2'
+'Hello 3rd-party JavaScript 3'
+'Hello 3rd-party JavaScript 4'
diff --git a/test/test.js b/test/test.js
index ab14972..e2a616d 100644
--- a/test/test.js
+++ b/test/test.js
@@ -7,6 +7,9 @@
 var expect = chai.expect;
 chai.use(sinonChai);
 
+var webpack = require('webpack')
+var SourceMapConsumer = require('source-map').SourceMapConsumer
+
 require('./lib/jsfm');
 var createInstance = global.createInstance;
 var getRoot = global.getRoot;
@@ -25,10 +28,10 @@
     var name = 'a.js';
 
     var actualCodePath = path.resolve(__dirname, 'actual', name);
-    var actualCodeContent = fs.readFileSync(actualCodePath);
+    var actualCodeContent = fs.readFileSync(actualCodePath, { encoding: 'utf8' });
 
     var expectCodePath = path.resolve(__dirname, 'expect', name);
-    var expectCodeContent = fs.readFileSync(expectCodePath);
+    var expectCodeContent = fs.readFileSync(expectCodePath, { encoding: 'utf8' });
 
 
     var actualResult = createInstance('actual/' + name, actualCodeContent);
@@ -44,10 +47,10 @@
     var name = 'b.js';
 
     var actualCodePath = path.resolve(__dirname, 'actual', name);
-    var actualCodeContent = fs.readFileSync(actualCodePath);
+    var actualCodeContent = fs.readFileSync(actualCodePath, { encoding: 'utf8' });
 
     var expectCodePath = path.resolve(__dirname, 'expect', name);
-    var expectCodeContent = fs.readFileSync(expectCodePath);
+    var expectCodeContent = fs.readFileSync(expectCodePath, { encoding: 'utf8' });
 
 
     var actualResult = createInstance('actual/' + name, actualCodeContent);
@@ -63,10 +66,10 @@
     var name = 'z.js';
 
     var actualCodePath = path.resolve(__dirname, 'actual', name);
-    var actualCodeContent = fs.readFileSync(actualCodePath);
+    var actualCodeContent = fs.readFileSync(actualCodePath, { encoding: 'utf8' });
 
     var expectCodePath = path.resolve(__dirname, 'expect', name);
-    var expectCodeContent = fs.readFileSync(expectCodePath);
+    var expectCodeContent = fs.readFileSync(expectCodePath, { encoding: 'utf8' });
 
 
     var actualResult = createInstance('actual/' + name, actualCodeContent);
@@ -77,4 +80,53 @@
 
     expect(actualJson).eql(expectJson);
   });
+
+  it('support source map', function() {
+    var name = 'sourcemap'
+
+    var mapPath = path.resolve(__dirname, 'actual', name + '.js.map');
+    var map = fs.readFileSync(mapPath, { encoding: 'utf8' });
+    var smc = new SourceMapConsumer(JSON.parse(map))
+
+    var oriPath = path.resolve(__dirname, 'expect', name + '.we');
+    var ori = fs.readFileSync(oriPath, { encoding: 'utf8' });
+
+    var genPath = path.resolve(__dirname, 'actual', name + '.js');
+    var gen = fs.readFileSync(genPath, { encoding: 'utf8' });
+
+    function matchPos(code, regexp) {
+      var line, col
+      code.split(/\r?\n/g).some(function (l, i) {
+        if (regexp.test(l)) {
+          line = i + 1
+          col = l.length
+          return true
+        }
+      })
+      return { line: line, col: col }
+    }
+
+    function checkPos(regexp) {
+      var genPos = matchPos(gen, regexp)
+      var oriPos = matchPos(ori, regexp)
+
+      var pos = smc.originalPositionFor({
+        line: genPos.line,
+        column: genPos.col
+      })
+
+      expect(pos.source.indexOf('sourcemap.we') > -1)
+      expect(pos.line).to.equal(oriPos.line)
+    }
+
+    checkPos(/console\.log\(1\)/)
+    checkPos(/console\.log\(2\)/)
+    checkPos(/console\.log\(4\)/)
+    checkPos(/console\.log\(5\)/)
+    checkPos(/console\.log\(6\)/)
+    checkPos(/console\.log\(7\)/)
+    checkPos(/console\.log\(8\)/)
+    checkPos(/console\.log\(9\)/)
+    checkPos(/console\.log\(0\)/)
+  })
 })
diff --git a/test/webpack.config.js b/test/webpack.config.js
index 4833d07..68792f3 100644
--- a/test/webpack.config.js
+++ b/test/webpack.config.js
@@ -2,6 +2,7 @@
 
 module.exports = {
   entry: {
+    sourcemap: path.resolve(__dirname, 'expect/sourcemap.we?entry=true'),
     a: path.resolve(__dirname, 'a.js?entry=true'),
     b: path.resolve(__dirname, 'expect/b.we?entry=true'),
     z: path.resolve(__dirname, 'expect/z.we?entry=true')
@@ -10,6 +11,7 @@
     path: path.resolve(__dirname, 'actual'),
     filename: '[name].js'
   },
+  devtool: 'source-map',
   module: {
     loaders: [
       {