Webpack输出为空对象

我想构建一个反应组件库作为节点模块，然后将其导入到不同的项目中。但是，如果我尝试导入组件，它只会返回一个空对象。Webpack输出为空对象

button.jsx：

import React, {Component} from 'react' 

export class Button extends Component { 

    render() { 
     return <button className='btn'>Hello Button comp</button> 
    } 
} 

export default Button

index.js

var Button = require('./button/button').default; 

module.exports = { 
    Button: Button 
}

webpack.config.js中的package.json

const Path = require('path'); 

module.exports = { 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    entry: { 
     app: './src/components/index.js' 
    }, 
    output: { 
     path: __dirname, 
     filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
      test: /\.jsx$/, 
      loader: 'babel-loader', 
      query: { 
       presets: [ 
        'es2015', 
        'react' 
       ] 
      }, 
      exclude: /node_modules/, 
      include: [ 
       Path.resolve(__dirname, 'src') 
      ] 
     }, 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      query: { 
       presets: [ 
        'es2015', 
        'react' 
       ] 
      }, 
      exclude: /node_modules/, 
      include: [ 
       Path.resolve(__dirname, 'src') 
      ] 
     } 
    ] 
    } 
}

主要属性是bundle.js

我想通了我在一个项目中导入Button，它只是一个空对象。在我看来，好像webpack不会正确捆绑索引文件。任何想法在这里可能是错的？

来源

2017-06-14 SeBe

默认情况下，webpack包不会公开您的导出，因为它假定您正在构建应用程序而不是库（这是webpack的更常用的用途）。您可以通过配置output.library和output.libraryTarget来创建库。

output: { 
    path: __dirname, 
    filename: 'bundle.js', 
    library: 'yourLibName', 
    libraryTarget: 'commonjs2' 
},

output.libraryTarget是模块，这也将让你露出库作为一个全局变量的格式。 commonjs2是Node使用的模块格式。有关commonjs和commonjs2之间的差异，请参阅What is commonjs2?。

由于您使用的是React，因此您会希望库的使用者将React作为依赖项存在，因此您不希望将其包含在您的包中。要做到这一点，您可以将其定义为External。这显示在Authoring Libraries中，它会引导您通过一个小例子。

来源

2017-06-14 10:33:14

非常感谢！现在它正在工作。 :) – SeBe

Webpack输出为空对象

回答

相关问题