基于webpack4从零开始构建react开发环境方法步骤详解
- 更新时间：2020-01-16 10:18:01
- 编辑：余寄琴
参考资料
- React与Redux开发实例精解 PDF 电子书 / 101.4 MB / 刘一奇 推荐度：
- React Native全教程：移动端跨平台应用开发 PDF 电子书 / 398 MB / 张益珲 推荐度：
- React设计模式与最佳实践 PDF 电子书 / 8.1 MB / 米凯莱 推荐度：
- React Native开发指南 PDF 电子书 / 16.1 MB / 黄为伟 推荐度：
- React进阶之路 PDF 电子书 / 2.1 MB / 徐超 推荐度：
正文内容
详解如何用webpack4从零开始构建react开发环境
项目文件准备：
执行npm init,然后创建如下图所示的文件。
在index.html里面添加
<!DOCTYPE html> <html> <head> <title>The Minimal React Webpack Babel Setup</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html>
在webpack.config.js里面添加
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
在package.json里面添加
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development"
},
这样，当执行npm start的时候，就会使用webpack-dev-server把index.js相关文件打包，生成bundle.js，这时候浏览器会打开一个窗口，执行index.html(contentBase里面定义了），又因为index.html里面引入了bundle.js，就可以把压缩后的js文件执行起来。当然引入bundle.js这一步可以由我们强大的html-webpack-plugin完成。
安装依赖
npm install --save-dev webpack webpack-dev-server webpack-cli npm install --save-dev @babel/core @babel/preset-env npm install --save-dev babel-loader npm install --save-dev @babel/preset-react
配置babel
在根目录下新建.babelrc文件，然后添加
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
在webpack.config.js里面添加babel-loader配置
module.exports = {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
...
};
引入react
npm install --save react react-dom
修改index.js: 这个ReactDOM.render就是把元素渲染到index.html里面id为'app'的元素厦门。在实际开发中，我们会把app.js渲染到这里，然后在app.js里面写redux,react-router构成的页面的起点。
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'My Minimal React Webpack Babel Setup';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);
配置react热加载
npm install --save-dev react-hot-loader
webpack.config.js
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
...
};
修改index.js
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'My Minimal React Webpack Babel Setup';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);
+ module.hot.accept();
这个时候执行npm start,就可以在浏览器访问http://localhost:8080看到Index.html里面的内容啦啦。参考链接：
https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#babel-react-setup
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
webpack4从零开始构建react开发环境相关教程
-
React Native中导航组件react-navigation跨tab路由处理详解
这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们
发布时间：2019-06-21
-
react 实现页面代码分割、按需加载的方法
本篇文章主要介绍了react 实现页面代码分割、按需加载的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
发布时间：2019-06-21
-
JavaScript忍者秘籍
JavaScript语言非常重要，相关的技术图书也很多，但没有任何一本书对JavaScript语言的重要部分（函数、闭包和原型）进行深入、全面的介绍，也没有任何一本书讲述跨浏览器代码的编写。本书是
大小：83.5 MBJavaScript电子书
-
JavaScript高级程序设计
《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜，使很多特有保持和手机客户端拓展宣布进到标准，另外也为JavaScript增加了许多融入发展方
大小：23 MBJS程序设计电子书
-
完美图解物联网IoT实操：ESP8266 Arduino，Cordova物联网移动App，JavaScript微控制器编程
完美图解物联网技术系列》图书是当前物联网开发技术应用的集大成者。本书内容以Arduino和JavaScript为主线，开发物联网应用、手机App和操控微电脑
大小：60.8 MB物联网电子书
-
移动网页设计与开发：HTML5+CSS3+JavaScript
将落伍的网址打导致更为灵便、友善，而且令其充分运用不一样机器设备和电脑浏览器的与众不同优点。根据《移动网页设计与开发HTML5+CSS3+JavaScript》，您将为投身第一线开发充分准备！ *內容
大小：30.2 MB移动开发电子书
-
Three.js开发指南：WebGL的JavaScript 3D库
大小：180.1 MBThree.js电子书
-
JavaScript函数式编程指南
这书关键介绍怎样根据ECMAScript6将函数式编程关键技术于编码，以减少编码的多元性。这书共三一部分內容。*一部分函数式观念是为第二一部分的学习培训作铺垫的，这一部分引入了对函数式
大小：12.79 MBjs函数电子书
-
第三方JavaScript编程
第三方JavaScript应用程序是自包含的应用组件，通常都是小脚本或插件，能够为Web站点增加功能。它们往往是由独立的组织或个人提供的，代码和文件都是来自于远程的Web地址。 《第三方JavaS
大小：74.2 MBJavaScript电子书
