react 在webpack中的使用

Posted 申小贺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 在webpack中的使用相关的知识,希望对你有一定的参考价值。

webpack的安装与上篇vue脚手架搭建中webpack的安装一样,只是babel安装中需要加上 @babel/preset-react并在.babelrc中配置

安装babel

npm install --save-dev babel-loader @babel/core

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

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

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

 

安装react react-dom

npm install --save-dev react react-dom

之前我按照npm install babel-core babel-loader babel-preset-react babel-preset-env这种方式安装,会在运行的过程中因为版本或兼容性问题报错,这是我安装官网上的安装方式进行安装的,可以正常运行,所以安装的时候要注意版本问题

以上是关于react 在webpack中的使用的主要内容,如果未能解决你的问题,请参考以下文章

带有服务器端渲染的 Webpack-React:使用哈希名称链接到服务器模板中的 css 文件

我可以在没有 webpack 的情况下使用 react 和 babel 吗?还是我需要所有 3 个组合?

如何使用内联 带有webpack的React应用程序中的标签

配置react+webpack+es6中的一些教训

webpack 代码拆分是不是适用于 react-native?

如何在 Webpacker 中使用 Rails Url 助手/Rails 5.1 中的 React-rails