【问题标题】：Webpack dynamically loading a node_module at runtime in browserWebpack 在浏览器运行时动态加载 node_module
【发布时间】：2019-05-06 14:52:56
【问题描述】：

用例：

DB 包含每个用户可以看到的小部件名称列表
每个小部件都是一个 node_module
我们需要在 UI 中动态加载小部件节点模块

示例：

import React from 'react'
import axios from 'axios'
import { StaticRouter,Route, Switch, NavLink } from 'react-router-dom';
const AsyncComponent = (moduleName) => {
  return require('../node_modules/' + moduleName) //This line is not working if the moduleName is mentioned at runtime, if it is statically mentioned then it works fine.
  //or something like
  return import('../node_modules/' + moduleName)

}
export default class Dashboard extends React.Component{
  state = {
    widgets : [],
    appIsMounted: false
  }

  componentDidMount(){
    axios.get('/widgets', (response) => { //DB contains list of widgets names for the specific user and there will be node_module for each widget or functionality.
      this.setState({
        widgets: response.data //list of functionalities or widgets to show in the UI
      })
    })
  }

  render(){
    return (
        <StaticRouter>
          <div>
 **strong text**               {
                    this.state.widgets && this.state.widgets.map(module => {
                        return <nav>
                            <NavLink to={`/${module}`} exact activeClassName="active">{module.module}</NavLink>
                            </nav>
                    })
                }
            </div>
            <div>
              <Switch>
              {
                this.state.widgets && this.state.widgets.map(module => {
                  return <Route path={`/${module}`} exact component={AsyncComponent.bind(this, module)} />
                })
              }
            </Switch>
            </div>
            </StaticRouter>
        )
  }
}

如果有人遇到这个问题，请告诉我。

【问题讨论】：

标签： webpack node-modules dynamic-loading

【解决方案1】：

您不需要在模块名称的路径前加上../node_modules。除非明确覆盖解析配置，否则所有模块都会自动解析。
如果我理解正确的话，我也遇到过同样的问题。您能否通过在您的 Route JSX 中内联 AsyncComponent 函数来尝试一次。还有，应该是这样的

const asyncComponent = bundle => (location, cb) => {
	bundle().then(component => {
		cb(null, component.default ? component.default : component);
	});
};

asyncComponent(() =>
    import(/* webpackChunkName: "CategoryLanding" */ 'pages/CategoryLandingPage/CategoryLandingPage.js')
   )

【讨论】：

感谢您的回复 - 我尝试了与您在 inline 中提到 asyncComponent 相同的方法，它可以工作，因为您正在静态传递文件名。 import(/* webpackChunkName: "CategoryLanding" */ 'pages/CategoryLandingPage/CategoryLandingPage.js') //staticaly mentioned and it works as webpack knows at compile timeimport(/* webpackChunkName: "CategoryLanding" */ '<Should be passed dynamically>') //It doesn't know about this chunk at compile time </Code>

【解决方案2】：

将此代码添加到 babelLoader 或您的 Webpack 配置中。

仅排除节点模块：

exclude: /node_modules/

排除节点模块和其他一些库

例如：我将使用 salesforce-ux 库作为我的外部库

exclude: /node_modules\/(?!(@salesforce-ux)\/).*/

【讨论】：