用Webpack 2暴露Redux

时间:2017-03-04 22:26:16

标签: webpack redux webpack-2

我正在一个正在进行的项目中将Webpack从版本1迁移到第二版,我所拥有的一个版本是依赖文件,其中我公开了所有依赖项在Window上使用webpack的expose-loader。

除了没有暴露的Redux之外,它的工作正常。

这些是我配置的相关部分:

entry: {
    dependencies: [
        'react',
        'react-dom',
        'react-router',
        'redux',
        'react-redux',
        'redux-thunk',
        'es6-promise',
        'isomorphic-fetch'
    ]
},

module: {
    rules: [
        {
            test: /\.js$/,
            use: [
                'babel-loader'
            ],
            include: path.join(__dirname, 'src')
        },
        {
            test: require.resolve('react'),
            use: 'expose-loader?React'
        },
        {
            test: require.resolve('react-dom'),
            use: 'expose-loader?ReactDOM'
        },
        {
            test: require.resolve('react-router'),
            use: 'expose-loader?ReactRouter'
        },
        {
            test: require.resolve('redux'),
            use: 'expose-loader?Redux'
        },
        {
            test: require.resolve('react-redux'),
            use: 'expose-loader?ReactRedux'
        },
        {
            test: require.resolve('redux-thunk'),
            use: 'expose-loader?ReduxThunk'
        },
        {
            test: require.resolve('isomorphic-fetch'),
            use: 'expose-loader?fetch'
        }
    ]
}

此处还有我的babel预设:

"presets": [
    "react",
    ["es2015", { "modules": false }],
    "stage-2"
],

当我运行构建时,我得到了这个输出:

enter image description here

请注意,Redux是由函数添加的。

知道如何解决这个问题吗?

1 个答案:

答案 0 :(得分:2)

看起来webpack不能像条目列表中那样使用简单的字符串引用自动解析redux和其他模块。

console.log放入expose-loader/index.js会导致此输出。这表明Redux和其他人甚至没有通过暴露加载器。

enter image description here

将条目列表更改为此应解决问题。

   entry: [
        require.resolve('redux'),
        require.resolve('react'),
        require.resolve('react-dom'),
        require.resolve('react-router'),
        require.resolve('react-redux'),
        require.resolve('redux-thunk'),
        require.resolve('es6-promise'),
        require.resolve('isomorphic-fetch')
    ],