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

2023-09-08 23:47:06 328

本文介绍了了Webpack4.x搭建react开发环境的方法步骤，分享给大家，也给自己留个笔记

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

"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",
...
}
...

执行npmrunbuild-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(
"h1",
{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开发环境的方法步骤

热门推荐

随机推荐