本文介绍了了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文件，并添加如下代码：
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var deps = [
];
//以上代码可以忽略，没有必要不要添加noparse，因为依赖代码中可能会有环境的判断，而浏览器中是拿不到process变量的，会报错！
var config = {
//这里是打包的入口
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) {
var deppath = 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结构的东西，如下:
...
<h1 onclick={this.handleclick.bind(this)} style={{ color: "red" }}>
{'hello ' + this.state.text}
</h1>
...
要解析这个东西还需要添加.babelrc文件，在其中添加：
{
"plugins": ["transform-react-jsx"]
}
这句主要是说在babel参与打包时，会启用jsx转换成js的插件。到这里你已经可以成功打出你想要的bundle.js
> webpack
hash: e716d360a6a752006c09
version: webpack 4.16.5
time: 973ms
built at: 2018-08-14 15:19:14
asset size chunks chunk names
bundle.js 715 kib main [emitted] main
entrypoint main = bundle.js
[./react/app.js] 2.74 kib {main} [built]
+ 21 hidden modules
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: function handleclick() {
this.setstate({
text: "clicked"
});
}
}, {
key: "render",
value: function render() {
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"]
}
}
参考：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
网友评论