Question

我有一个React组件，我正在使用Webpack构建它。该组件是从index.js导出的，entry是模块中的// packages/tnetennba/index.js class Tnetennba extends React.Component { render() { return ( <div>good morning, that's a nice tnetennba</div> ) } } export default Tnetennba文件：

webpack-dev-server

我的webpack配置与模块位于不同的目录（我使用的是单一存储库），因此模块本身没有任何// packages/tnetennba/package.json { "name": "tnetennba", "version": "0.0.1", "main": "dist/index.js", "scripts": { "start": "webpack-dev-server --config ../config/webpack.dev.js --open", "build": "webpack --config ../config/webpack.build.js" } }可用的构建配置文件或模板。

// packages/config/webpack.dev.js
module.exports = merge(common, {
  mode: 'development',
  ...
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: '../config/index.html' // <-- this path is relative, becuase webpack will be called from packages/tnetennba directory.
    })
  ]
})

但是，我将无法在开发模式下使用该组件，而我可以使用HtmlWebpackPlugin来实现：

ReactDOM.render

但是，我必须将index.js函数调用放入模块的//... export default Tnetennba ReactDOM.render(<Tnetennba />, document.getElementById('root')) // <-- This shouldn't be here.中，以将组件呈现为模板：

render

问题：有没有一种方法可以避免在开发人员模式下在模块内调用process？可以在webpack中调用React renderer吗？

我也希望避免使用节点的empty变量进行条件渲染。

Answer 1

看看HtmlWebpackIncludeAssetsPlugin，它允许您将资产添加到html文件，我的想法是添加一个js文件，该文件将在其中调用ReactDom.render方法。

new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
  assets: [
    { path: 'path/to/bootstrap.js', type: 'js' }
  ]
})

直接将组件渲染到模板中

1 个答案: