最近自己在练习写React,Vue的时候，会在不同的子组件中多次import同一个文件，例如：import React from 'react'、import Vue from 'vue'，引入的次数多了慢慢让我产生了疑惑，引入这么多次，webpack会多次打包吗？直觉告诉我webpack并不傻，不会愚蠢的打包多次使打包后的文件异常臃肿，如果不会的话为什么不会呢？怀着好奇心在谷歌搜索很久也没有找到让我信服的的答案，于是我自己做了个，来证明自己的猜想：

1.模拟react/vue环境

第一步是安装相关webpack、babel等相关依赖以及建好目录 webpack设置：

//webpack.config.jsmodule.exports = {  entry: './app.js',  output: {    filename: 'bundle.js'  },  module: {    loaders:[      {        test: /\.js[x]?$/,        exclude: /node_modules/,        loader: 'babel-loader?presets[]=es2015&presets[]=react'      },    ]  }}复制代码

package.json所需依赖：

//package.json{  "name": "test",  "version": "0.0.1",  "devDependencies": {    "webpack": "^1.14.0"  },  "dependencies": {    "babel-core": "^6.21.0",    "babel-loader": "^6.2.10",    "babel-preset-es2015": "^6.18.0",    "babel-preset-react": "^6.16.0"  }}复制代码

其他用于测试的文件：

//demo.js--相当于vueexport default {  test(argu) {    console.log(argu)  }}//test1.js --相当于某个组件import demo from './demo'export default {  test1() {    demo.test(1)  }}//test2.js --相当于另一个组件import demo from './demo'export default {  test1() {    demo.test(2)  }}//add.js --入口文件import Test1 from './test1'import Test2 from './test2'Test1.test1()Test2.test2()复制代码

我在test1.js,test2.js中都引入demo.js,并且exoprt 出依赖demo.js的方法，然后再在app.js中引入test1.js,test2.js webpack打包后打开，找到demo部分。

不同文件中多次import同一个文件，webpack并不会多次打包，只会在打包后的文件中会多次引用打包后的该文件对应的函数。

问题终于搞清楚了，很舒服！！?