13518219792
这篇文章主要介绍Webpack 4.x怎样搭建react开发环境，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司主营梁园网站建设的网络公司,主营网站建设方案,成都app软件开发公司,梁园h5小程序开发搭建,梁园网站营销推广欢迎梁园等地区企业咨询
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结构的东西，如下:
