Javascript 如何使用webpack CLI输出可导入的模块？

这里有三个文件

文件1:src/module/a/index.js

import b from './b.js'; 
import c from '../c/index.js'; 

const d = () => 'd'; 

export default { b, c, d }; 

export default () => 'c' 

文件2:src/module/a/b.js

export default () => 'b'; 

文件3:src/module/c/index.js

import b from './b.js'; 
import c from '../c/index.js'; 

const d = () => 'd'; 

export default { b, c, d }; 

export default () => 'c' 

我想使用webpack CLI将代码打包到文件中

// file dist/lib/a.js 
const b = () => 'b'; 
const c = () => 'c'; 
const d = () => 'd'; 

export default { b, c, d }; 

---

因为您使用的是ES6代码，所以需要像babel这样的transpiler，要做到这一点，您需要根目录中的

webpack.config.js

文件

这里是您的最低设置

webpack.config.js

const path = require('path');

const config = {
  entry: './src/index.js', // path to your index.js
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js', // output file
    publicPath: 'build/' // output dir
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/
      }
    ]
  }
};

module.exports = config;

这是您的最小

package.json

文件

添加脚本，以后可以通过

npm run build

命令运行它

"scripts": {
  "build": "webpack"
},

添加您的开发依赖项，您可以稍后使用

npm install

安装它，或者使用命令单独安装它

npmi——保存开发巴别塔核心巴别塔加载器巴别塔预设环境网页

"devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-env": "^1.1.4",
    "webpack": "^2.2.0-rc.0"
}

根据您的需要，您可以稍后添加其他babel预设，如

es2015

和

stage-0

npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-0

现在将

.babelrc

文件添加到根目录中，粘贴此代码

{
"presets": ["babel-preset-env"]
}

---

如果您使用的是ES6，那么您需要一个像babeljs这样的transpiler来转换代码，我认为您不可能只用cli就可以做到这一点。有人能证实这一点吗？