首页 react webpack script标签引入js文件

react webpack script标签引入js文件

时间: 2023-08-16 20:15:29 浏览: 264

react基本引入文件

里面有五个文件，如果用的是react15版本的就引入react.min.js，react-dom.min.js,browser.min.js;要是用react16版本的就引入react.production.min.js，react-dom.production.min.js,dom.min.js,browser.min.js三个文件

如果要在React项目中使用Webpack，并且想要在HTML文件中使用script标签引入打包后生成的JS文件，可以按照以下步骤进行操作： 1. 在Webpack配置文件中，添加以下配置： ```javascript module.exports = { // ...其他配置 output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/' } }; ``` 这里通过output配置指定了打包后生成的JS文件的输出路径和文件名，以及publicPath配置，这个配置用于指定Webpack生成的资源文件（比如打包后的JS文件）在浏览器中的访问路径。 2. 在HTML文件中使用以下代码引入打包后的JS文件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React App</title> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html> ``` 这里通过script标签的src属性指定了Webpack生成的JS文件的访问路径，这个路径就是在Webpack配置中指定的publicPath。 3. 在React项目中，可以通过ReactDOM.render()方法将组件渲染到页面上。 ```javascript import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); ``` 这里使用ReactDOM.render()方法将一个React元素渲染到页面上，具体的渲染内容可以根据实际需求修改。最后，在浏览器中打开HTML文件，即可看到渲染后的内容。

阅读全文