webpack 4.x怎样搭建react开发环境-mile米乐体育

这篇文章主要介绍webpack 4.x怎样搭建react开发环境，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

webpack 4.x搭建react开发环境的方法步骤

必要依赖一览(npm install) 安装好。

"dependencies":{ "babel-core":"^6.26.3", "babel-loader":"^7.1.5", "babel-preset-env":"^1.7.0", "react":"^16.4.2", "react-dom":"^16.4.2", "webpack":"^4.16.5" ... }

babel系列是干什么用的呢？是为了支持es6以上的高级语法的编译。但是因为react有jsx这个东西存在，所以单纯的babel是不够的，此外要让babel作用于webpack，需要给webpack添加一个loader（以前版本叫loader，4.x版本开始改用‘rules'），在工程根目录新建webpack.config.js文件，并添加如下代码：

varpath=require('path'); varnode_modules=path.resolve(__dirname,'node_modules'); vardeps=[ ];  //以上代码可以忽略，没有必要不要添加noparse，因为依赖代码中可能会有环境的判断，而浏览器中是拿不到process变量的，会报错！ varconfig={ //这里是打包的入口 entry:path.resolve(__dirname,'./react/app.js'), resolve:{ alias:{ } }, //打包完成后输出到./build/bundle.js文件中 output:{ path:path.resolve(__dirname,'./build'), filename:'bundle.js', }, mode:'development', module:{ //上述的规则，loader就放在这里，这段没什么好说的，从webpack官方文档上直接拿来用 rules:[ { test:/\.js$/, exclude:/(node_modules|bower_components)/, use:{ loader:'babel-loader', options:{ //刚刚下载的module之一 presets:['babel-preset-env'] } } } ] } };  //遍历你的自定义要排除的依赖，安装到node_modules里的依赖一般不需要排除掉 deps.foreach(function(dep){ vardeppath=path.resolve(node_modules,dep); config.resolve.alias[dep.split(path.sep)[0]]=deppath; config.module.noparse.push(deppath); });  module.exports=config;

以上代码可以直接用，请先将注释去掉。有了以上文件配置，你可以直接在package.json中添加scripts来打包你的app.js。

... "scripts":{ ... "build-config":"webpack", ... } ...

执行npm run build-config可执行打包操作，但是目前为止还是会报错，因为缺少babel设置，webpack打包时无法识别jsx语法，什么时jsx语法？就是在js代码中写的类似于dom结构的东西，如下:

...  {'hello' this.state.text}  ...

要解析这个东西还需要添加.babelrc文件，在其中添加：

{ "plugins":["transform-react-jsx"] }

这句主要是说在babel参与打包时，会启用jsx转换成js的插件。到这里你已经可以成功打出你想要的bundle.js

>webpack  hash:e716d360a6a752006c09 version:webpack4.16.5 time:973ms builtat:2018-08-1415:19:14 assetsizechunkschunknames bundle.js715kibmain[emitted]main entrypointmain=bundle.js [./react/app.js]2.74kib{main}[built]  21hiddenmodules

webpack打包的好处就是这里，可以让你的app加载速度更快，如上的包总计715kb，隐藏了没有用到的模块21个。这就是为什么要搭手脚架开发的理由。

jsx-transform的坑

此外还有一点要说一下，就是在引入react时，请整个引入，要么就额外引入它在编译后的代码中可能会用到的api，否则会说什么什么没找到而导致页面加载不出来。看编译后的代码：

var_react=__webpack_require__(/*!react*/"./node_modules/react/index.js"); var_react2=_interoprequiredefault(_react); ... _createclass(mytitle,[{ key:"handleclick", value:functionhandleclick(){ this.setstate({ text:"clicked" }); } },{ key:"render", value:functionrender(){ return_react2.default.createelement( "h2", {onclick:this.handleclick.bind(this),style:{color:"red"}}, 'hello' this.state.text ); } }]);

如果你不引入react, 编译后render()函数中的_react2会是react.createelement而react显然是找不到这个变量的。看到编译后的代码，你可能更能理解，哦在jsx的dom中那样写原来是这个意思啊···

vscode中开发，需要配置好eslint

react中有大量的es6的写法，如果不配置eslint你会看到大量飘红，首先是在项目的开发环境安装依赖：

"devdependencies":{ ··· "eslint":"^5.3.0", "eslint-plugin-import":"^2.14.0" ··· }

在项目根路径下添加.eslintrc.json，并添加以下代码[^eslint]：

{ "parseroptions":{ //使用的ecma版本 "ecmaversion":6, "sourcetype":"module", //使用jsx特性 "ecmafeatures":{ "jsx":true } }, "rules":{ //忽略console的警告 "no-console":"off", "semi":["error","always"] } }

参考：

• eslint官方文档

• babel-plugin-transform-jsx文档

• webpack4.15.1 官方文档

• babelrc 配置文档

• react webpack快速上手指南(虽然已经过时，还有部分不适用，但是还是借鉴了一部分代码)

• 阮一峰 四课时培训课，虽然过时，但是还是能带你体验一番前端开发

以上是“webpack 4.x怎样搭建react开发环境”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！