使用webpack对react代码进行打包

最新推荐文章于 2024-08-25 23:10:32 发布

发现一只小刺猬

最新推荐文章于 2024-08-25 23:10:32 发布

阅读量175

点赞数 1

分类专栏： webpack 文章标签： react webpack

本文链接：https://blog.csdn.net/qq_39998226/article/details/109621703

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装react

npm install react react-dom --save

index.js添加react代码

import "@babel/polyfill";
import React, {Compnent} from 'react';
import ReactDom from 'react-dom';

class APP extends Component {
    render() {
        return <div>Hello World</div>
    }
}
ReactDom.render(<App />, document.getElementById('root'))

安装@babel/reset-react

npm install --save-dev @babel/preset-react

webpack.config.js

{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",  
          options: {
            presets:  [
                ["@babel/preset-env", // 把js代码翻译成es5
                {
                  "useBuiltIns": "usage"  // 直打包使用到的es6语法
                }
            ],
            "@babel/preset-react"
        ]  
          }
        }
      },

顺序是先用preset-react解析react的jsx语法，然后使用preset-env处理es6语法。

Demo地址