webpack实现react打包

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1、安装配置babel

yarn add babel-loader @babel/core @babel/preset-env

2、webpack.config.js配置module

 module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },

3、安装react及react、react-dom

yarn add react react-dom  @babel/preset-react

4、项目根目录下新建.babelrc,里面内容如下

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

5、在webpack配置的入口文件中写如下代码

import React,{Component} from 'react'
import ReactDom from 'react-dom'
class App extends Component{
    render(){
        return <div>我是react应用</div>
    }
}
ReactDom.render(<App/>,document.querySelector('#root'))

6、webpack要引入HtmlWebpackPlugin,并配置有<div id=root></div>的html文件为模板文件

yarn add html-webpack-plugin

src/public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div ></div>
</body>
</html>

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    main: './src/main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/public/index.html'
    })
  ],
 output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].js'
    }
}

7、webpack-dev-server打开，页面出现我是react应用则打包成功。

以上是 webpack实现react打包 的全部内容， 来源链接： utcz.com/z/382955.html

回到顶部