Question

这里有三个文件。

文件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 };

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

export default () => 'b';

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

export default () => 'c'

我想使用webpack CLI将代码打包成文件。

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

export default { b, c, d };

Answer 1

因为你使用的是ES6代码，所以你需要像babel这样的转换器，为此你需要在你的根目录中有一个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"
},

添加您的dev依赖项，稍后可以使用npm install安装它，或者只使用命令

单独安装它

npm i --save-dev babel-core babel-loader babel-preset-env webpack

"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"]
}

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

1 个答案: