У меня есть некоторые компоненты React, и я хочу создать пакетный файл, включающий их, и использовать его в другом HTML-файле.
Что я сделал: я создал файл конфигурации Webpack, который получает index.js в /src папка в качестве входного файла и генерирует пакетный файл, такой как components.js
I экспортировано все компоненты в файле /src/index.js, и я предполагаю, что все онидоступны после связывания с Webpack
Я использовал Внешний ключ в Webpack для генерации файла комплекта только из моего источника, а не из внешних библиотек
В конце я поместил скрипты реакции и связывания файла в файл HTMLи я хочу использовать их в качестве чисто функции JavaScript.
<html>
<head>
<title></title>
</head>
<body>
<header id="headerContent"></header>
<section id="newsContent"></section>
<section id="categoryContent"></section>
<footer id="footerContent" ></footer>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/javascript" src="components.js"></script></body>
<script>
ReactDOM.render(React.createElement(HeaderComponent), document.getElementById("headerContent"))
ReactDOM.render(React.createElement(NewsComponent), document.getElementById("newsContent"))
ReactDOM.render(React.createElement(NewsComponent), document.getElementById("categoryContent"))
ReactDOM.render(React.createElement(FooterComponent), document.getElementById("footerContent"))
</script>
</body>
</html>
Но это не работает.Неужели я что-то не так и какое лучшее решение?Webpack Config:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
externals: {
// Don't bundle the 'react' npm package with the component.
'react': 'React',
'react-dom' : 'ReactDOM'
}
}