Question

现在已经有三天了，我正在尝试理解webpack执行一项简单的任务（当然，在三天内我可以手工完成）但是为了学习webpack并且能够扩大规模...

我带着一个绝望的问题跟你来，这可能与这个人想要实现的目标有关How do I concatenate and minify files using webpack，但他的解决方案对我不起作用。

问题很简单我有三个类：

./ SRC / class1.js

export default class One {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

./ SRC / class2.js

class Two {
  iMSoFat() {
    this.fatness = 88
    return (this.fatness)
  }
}

export { Two }

./ SRC / class3.js

class Three {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

export { Three }

我想做的是在index.html页面中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test ton cul</title>
    <script src="./lib/ebjs.js" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript">
      console.log(One, Two, Three);
    </script>
  </body>
</html>

我也会满意

new window.One() 
//.. or EVEN 
new window.ebjs.One()

所以我尝试了几个配置，我将免除你经历的令人厌烦的细节和挫折......缺乏睡眠和食物。

我尝试了很长时间才能使数组入口点工作......但是我在文档中的某处读到了＃34;如果你传递了一个数组：所有模块都是在启动时加载的。最后一个是导出的。＆＃34; 这解释了很多......我总是以某种方式只得到一个类......无论那意味着什么......为什么它会像那样？这对我来说完全没有意义......反正...... 但即使这样，我得到的类也不是形式library.class（）或window.class（）或class（）。

所以过了一会儿，我可以在index.js中加载所有东西并导出它！

我首先尝试使用ES6导入样式，因为为什么不呢。但是import {One} from './src/class1'不能以某种方式工作，只是在未定义的导出上生成一堆..就像window.library.One = undefined。

所以我在解决这个index.js：

之前再次摆弄了一会儿

index.js

const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')


export { class1, class2, class3 }

我的webpack配置发生了很大的变化，但现在我正在使用它：

webpackrc.config.babel.js

const libraryName = 'ebjs'
const outputFile = `${libraryName}.js` 

export default {
  entry: './index.js',
  target: 'web',
  // entry: './index.js',
  devtool: 'source-map',
  output: {
    path: `${__dirname}/lib`,
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
      },
    ],
  },
}

许多细节和试验/错误已经痛苦地进行了......我确实写了我的实验日志。也许我会在几个小时内扣动扳机之前与世界分享。

无论如何，它有点有效，但并不像预期的那样，绝对不是生产质量。要访问该类，我必须使用＆＃34; new libraryName.One.One（）＆＃34;。如果我想将其捆绑为npm，这对用户来说没有任何意义。它仍然没有像预期的那样工作。

以下是页面上对象的屏幕截图：

我希望有人能帮助我。我的生活真的可能依赖于它：）

谢谢！

编辑并结束

所以cbll的答案确实有用......我可以使用es6 import语句，并且类已正确导出到bundle中。在html中我可以使用

libraryName.class()

如果有人和我一样处于同样的困境，我创建了一个小型回购：

https://github.com/albertbuchard/example-webpack-es6-class-bundle

再次感谢cbll和Michael Jungo！

Answer 1

在每个classN.js中，在文件的末尾和开头处按export default One导出每个类（正如您在“一个”示例中所做的那样，而不是其他类）。在index.js中，通过以下方式导入每个：import One from './classN.js'，当然假设它们位于同一文件夹中（如果没有，请添加正确的路径）。然后它将包含在您的主index.js中，并与Webpack捆绑在一起。

在你的情况下，这意味着你的index.js将开始这样的事情：

import One from ('./src/class1.js')
import Two from ('./src/class2.js')
import Three from ('./src/class3.js')

这假设您在示例中导出了所有类，例如One，所以：

export default class One { // code goes here

export default class Two { // code goes here

export default class Three { // code goes here

Answer 2

你几乎就在那里，但看起来你对import / export语法感到有点困惑。

首先，您以不同方式导出类。在./src/class1.js中，您使用默认导出：export default class One {，但在其他两个导出中使用命名导出export { Two }。要正确导入它们，您将拥有：

import One from './src/class1'
import { Two } from './src/class2'
import { Three } from './src/class3'

因为require与ES模块的工作方式不同，所以需要的等价物是：

const One = require('./src/class1').default;
const Two = require('./src/class2').Two;
const Three = require('./src/class3').Three;

然后您只需使用以下内容导出它们：

export { One, Two, Three }

在您的index.html中，您需要添加库前缀：

<script type="text/javascript">
  console.log(ebjs.One, ebjs.Two, ebjs.Three);
</script>

使用webpack将多个ES6类捆绑到一个文件中，以便在脚本标记

2 个答案: