原文：https://blog.csdn.net/u012863664/article/details/72813941
第一步：寫了一個導出模塊 export.js
var name = "林玖" var age = 18 var say = function(){ console.log('你好啊！') } // 批量導出 export {name,age,say}
第二步：寫了一個導入模塊 import.js,導入了export中的屬性和方法
import {name,age,say} from './export.js'
console.log(name)
console.log(age)
say()
然后想在瀏覽器運行一下，但是不行哦
第三步：下載node.js和webpack
下載node.js可以通過官網: http://nodejs.cn/download/
然后打開node自帶的命令行，輸入如下命令全局安裝webpack工具
npm install -g webpack
接着通過命令行工具定位到你的工程文件的根目錄下, 再次安裝webpack到你的工程中
npm install webpack
第四步：編寫webpack.config.js
var webpack = require("webpack") var path = require('path') module.exports = { entry: './import.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, module:{ loaders:[ {test:/\.js$/, loader:'babel-loader'} ] } }
第五步：編寫html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Es6的導入導出</title> </head> <body> 導入進來了嗎？ <script src="dist/bundle.js"></script> </body> </html>
第六步：配置.babelrc文件，在工程文件的根目錄下創建一個.babelrc文件(注意前面有個點), 這個文件是用來描述我要根據什么樣的規則、或者是將JS文件編譯成什么版本的文件(比如說ES5). 該文件的內容如下:
{ "presets": [ "es2015" ], "plugins":[] }
第七步：創建package.json 文件，並安裝相應的包
{ "name": "Moudle", "version":"1.0.0", "dependencies":{ }, "devDependencies": { "babel":"^6.23.0", "babel-cli":"6.24.1", "babel-core":"6.26.3", "babel-loader": "^7.0.0", "babel-preset-es2015":"^6.24.1", "webpack": "^2.7.0" } }
安裝相應的包，就用通用的方法嘍：
npm install （淘寶鏡像的用：cnpm install）
第八步：使用webpack打包
使用命令行工具定位到項目的根目錄下, 然后輸入如下指令
webpack
等待一會兒就會發現工程文件的目錄下多了一個dist文件夾, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通過下面的代碼引入js文件
<script src="dist/bundle.js"></script>
最后打開F12：會發現打印出了導入的姓名年齡和方法。