入门项目"/>
一个简单的基于Webpack的React入门项目
虽然React提供了create-react-app的脚手架命令行帮助我们自动生成一个react的项目，但是因为生成的项目还是被create-react-app的脚手架进行了封装，我们还是不知道其是如何运行开发模式的。因此，笔者这篇文章就简单的给大家介绍一下，如果自己手工创建一个可以编译React代码，同时也能识别JSX文件，动态热加载的一个React入门项目。
步骤1. 创建一个空项目
cd C:\Users\rodney\react-webpack-basic
npm init
执行后，其会生成一个package.json的文件
步骤2. 修改package.json 加入相应的依赖
{"name": "01-webpack-basic","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --port 3000 --hot --progress --display-modules --colors --display-reasons"},"keywords": [],"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.0.0","babel-plugin-transform-runtime": "^6.23.0","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","babel-preset-stage-0": "^6.24.1","html-webpack-plugin": "^4.5.0","webpack": "^4.44.2","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"},"dependencies": {"react": "^16.13.1","react-dom": "^16.13.1"}
}步骤3. 创建一个src和dist目录
mkdir src
mkdir dist
步骤4. 在src目录下，新建index.html 和 index.js, 其文件内容如下：
4.1 index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><!--script src = '/main.js'></script -->
</head>
<body><div id="app"></div>
</body>
</html>
4.2 index.js
import React from 'react' //Create compnont, Virutal DOM, Life cycle
import ReactDOM from 'react-dom' //Render the Vitual DOMconst hellowWorld= <div>Hello World!</div>ReactDOM.render(hellowWorld, document.getElementById('app'))
5. 添加webpack 配置文件： webpack.config.js
注意，这个文件在根目录下，比如笔者的目录，C:\Users\rodney\react-webpack-basic
const path = require('path')
const HtmlWebPackPlugin= require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({template: path.join(__dirname,'./src/index.html'),filename: 'index.html'
})module.exports = {mode:'development', //production,developmentplugins: [htmlPlugin],module:{rules:[{test: /\.js|jsx$/,exclude: /node_modules/, loader: "babel-loader"}]},resolve: {extensions: ['.js', '.jsx', '.json'], //表示这几个文件的后缀名，可以省略不屑alias: {'@': path.join(__dirname, './src') // 这样@就表示项目根目录中的src的这一层路径}}};
6.添加babel配置文件
在根目录下，创建一个.babelrc的文件，其内容如下：
{"presets":["env","stage-0","react"],"plugins": ["transform-runtime"]
}
7. 运行cnpm 安装依赖
如果在国内话，最好用cnpm的命令安装依赖，其比直接用npm快很多，原因很简单，npm的需要去国外的服务器上下载资源，而cnpm install 可以直接用国内的npm的依赖包
C:\Users\rodney\react-webpack-basic>cnpm install
/ [5/12] Installing loader-runner@^2.4.0platform unsupported webpack-dev-server@3.11.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
\ [5/12] Installing array-uniq@^1.0.1[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
/ [6/12] Installing readable-stream@^2.3.3
WARN node unsupported "node@v14.13.0" is incompatible with webpack@4.44.2 › watchpack@1.7.4 › watchpack-chokidar2@^2.0.0, expected node@<8.10.0
| [6/12] Installing binary-extensions@^2.0.0platform unsupported webpack@4.44.2 › watchpack@1.7.4 › chokidar@3.4.3 › fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32)
/ [6/12] Installing fill-range@^7.0.1[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 12 packages
√ Linked 608 latest versions
[1/1] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "C:\\Users\\rodney\\react-webpack-basic\\node_modules\\_core-js@2.6.11@core-js"
Thank you for using core-js ( ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
>
> , the author of core-js ( ) is looking for a good job -)[1/1] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 106ms
√ Run 1 scripts
deprecate webpack-dev-server@3.11.0 › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate webpack-cli@3.3.12 › findup-sync@3.0.0 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see
deprecate webpack-dev-server@3.11.0 › chokidar@2.1.8 › fsevents@^1.2.7 fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
Recently updated (since 2020-10-07): 7 packages (detail see file C:\Users\rodney\react-webpack-basic\node_modules\.recently_updates.txt)Today:→ babel-preset-env@1.7.0 › browserslist@3.2.8 › electron-to-chromium@^1.3.47(1.3.579) (12:02:29)
√ All packages installed (701 packages installed from npm registry, used 15s(network 14s), speed 149.32kB/s, json 620(1.6MB), tarball 499.38kB)
8. 运行Hello World程序
C:\Users\rodney\react-webpack-basic>npm run dev> 01-webpack-basic@1.0.0 dev C:\Users\rodney\react-webpack-basic
> webpack-dev-server --open --port 3000 --hot --progress --display-modules --colors --display-reasons10% building 1/1 modules 0 activei ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\rodney\react-webpack-basic
12% building 17/19 modules 2 active C:\Users\rodney\react-webpack-basic\node_modules\_webpack-dev-server@3.11.0@webpack-dev-server\client\clients\BaseClient.jsi ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: 8ffadd07524413ffa506
Version: webpack 4.44.2
Time: 1738ms
Built at: 2020/10/14 下午11:25:52Asset Size Chunks Chunk Names
index.html 31 bytes [emitted]main.js 398 KiB main [emitted] main
Entrypoint main = main.js
[0] multi ./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src 52 bytes {main} [built]
[./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client/index.js?http://localhost:3000] ./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client?http://localhost:3000 4.29 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client/utils/createSocketUrl.js] 2.91 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
[./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/client/utils/sendMessage.js] 402 bytes {main} [built]
[./node_modules/_webpack@4.44.2@webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/_webpack@4.44.2@webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/_webpack@4.44.2@webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/_webpack@4.44.2@webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] ./node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 13 bytes {main} [built]+ 20 hidden modules
Child HtmlWebpackCompiler:1 assetEntrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0[./node_modules/_html-webpack-plugin@4.5.0@html-webpack-plugin/lib/loader.js!./src/index.html] 263 bytes {HtmlWebpackPlugin_0} [built]
9. 运行成功
10. 热修改热编译热运行
因为我们使用了webpack-dev-server，其是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。webpack-dev-server 主要提供两个功能：
- 为静态文件提供web服务
- 自动刷新和热替换(HMR)
自动刷新指当修改代码时webpack会进行自动编译，更新网页内容热替换指运行时更新各种模块，即局部刷新。具体安装步骤和用法请参考《配置webpack-dev-server》
我们在index.js 快速修改“Hello World” 为 “Hello Webpack React” ，其不需要执行任何的命令，webpack-dev-server 会自动编译，网页内容自动刷新~
更多推荐
一个简单的基于Webpack的React入门项目
发布评论