webpack+babel+react 搭建react环境

最新推荐文章于 2021-06-20 13:58:46 发布

cxy_12345

最新推荐文章于 2021-06-20 13:58:46 发布

阅读量233

点赞数

分类专栏： webpack+babel+react 文章标签： reactjs webpack babel

本文链接：https://blog.youkuaiyun.com/cxy_12345/article/details/106313859

版权

webpack+babel+react 专栏收录该内容

1 篇文章

订阅专栏

本文将指导你如何一步步地通过安装、配置webpack.config.js、.babelrc以及package.json，来搭建一个React开发环境。最后通过npm run dev启动项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装

#安装webpack
npm install --save-dev webpack
#如果使用webpack4+还要安装cli
npm install --save-dev webpack-cli
#安装输出设置插件
npm install --save-dev html-webpack-plugin
#安装webpack-dev-server
npm install --save-dev webpack-dev-server

#babel 核心包
npm install --save-dev babel-core

#babel 语法转换的包
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-stage-0

#babel API转换的包
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime

#结合webpack使用需要安装的包,为什么安装7版本见版本匹配目录
npm install --save-dev babel-loader@7

#安装react和react-dom
npm install --save react react-dom

#解析react语法的预设
npm install --save-dev babel-preset-react

2.配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
//webpack 4.x中，如果不写entry,他默认打包src下index.js
//若不写output，默认打包到dist目录下，生成main.js文件
module.exports = {
    mode:"development",
    devServer: {
        //配置webpack-dev-server的www目录
        contentBase: './'
    },
    //-----------------输出设置 start------------------
    plugins: [
        // 该插件就是将index.html打包到你bundle.js所属的目录,同时会自动在index.html中注入script标签，所以在src/index.html文件中不用自己引入bundle.js
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    module:{
        rules:[
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,//排除node_modules目录中的文件
                use: 'babel-loader'
            }
        ]
    }
}

3.配置.babelrc

{
	"presets":["env","stage-0","react"],
	"plugins":["transform-runtime"]
}

4.配置package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

4.启动

npm run dev