reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署)
本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使用这个种子项目 https://github.com/tianxiangbing/react-seed
reactjs今年在前端圈里很火,用了三四个月,感觉确实很适合前端开发人员使用,值得深入一下,所以这里记录一下我简单的学习过程,首先是react的环境,由于现在react的新版本已经很稳定了,所以推荐使用es6+webpack来搭建开发环境。
首先,安装nodejs,略过,安装gitbrach,略过,直接搜索到相对应软件的官网,下载最新正式版本的软件,然后就下一步下一步完成安装就可以了,很简单的过程,但是不容忽略,如有问题,可以问我。
然后就是安装webpack和一些依赖组件,便于打包,比如,在你的项目文件夹里执行
1 | npm init |
然后就是一直回车,新建一个 package.json 的文件,然后添加如下的代码进去:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | "devDependencies" : { "babel-core" : "^6.7.7" , "babel-loader" : "^6.2.4" , "babel-preset-es2015" : "^6.6.0" , "babel-preset-react" : "^6.5.0" , "component-ajax" : "forbeslindesay/ajax" , "css-loader" : "^0.23.1" , "extract-text-webpack-plugin" : "^1.0.1" , "file-loader" : "^0.8.5" , "html-loader" : "^0.4.3" , "html-webpack-plugin" : "^2.16.1" , "moment" : "^2.13.0" , "node-sass" : "^3.5.3" , "react" : "^15.0.1" , "react-cookie" : "^0.4.6" , "react-dom" : "^15.0.1" , "react-helmet" : "^3.1.0" , "react-router" : "^2.4.0" , "sass-loader" : "^3.2.0" , "style-loader" : "^0.13.1" , "url-loader" : "^0.5.7" , "webpack" : "^1.13.0" , "webpack-dev-server" : "^1.14.1" } |
有些不是必须的,但建议都加上,以防后面还是会用到,再执行 npm install 安装这些依赖到本地,控制台测试下webpack是否安装成功:
1 | webpack -v |
如果报错了,可以尝试把webpack安装成全局的
1 | npm install -g webpack |
接下来,就是新建一个 webpack.config.js 的配置文件了,然后粘贴如下的代码进去.

var path = require("path"); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); console.log("+++++++++++" + process.env.NODE_ENV + "***********") var TEST = process.env.NODE_ENV == "test" || process.env.NODE_ENV == "dev"; console.log(TEST) var filename = TEST ? "[name]" : "[chunkhash:8].[name]"; console.log(filename) var extractCSS = new ExtractTextPlugin('' + filename + '.css'); //var ignoreFiles = new webpack.IgnorePlugin(new RegExp("^(jquery|react|react-dom)$")); //动态创建html var HtmlWebpackPlugin = require('html-webpack-plugin'); var htmlPlugin = new HtmlWebpackPlugin({ title: "签到", filename: '../index.html', template: "template.html" }); var modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/cyconfig"]; if (process.env.NODE_ENV == "test") { modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/config", "app/cyconfig"]; } var config = { entry: { app: ["./app/app.jsx"], vendor: ["react", "react-dom", 'whatwg-fetch', 'react-router'] }, output: { path: path.resolve(__dirname, "caiyun/build"), //publicPath: "/data/assets/build/", publicPath: "", filename: filename + ".js" }, resolve: { modulesDirectories: modulesDirectories, extensions: ['', '.js', '.jsx', 'css'] }, module: { loaders: [{ jsx: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015', 'react'] } }, { test: /\.(eot|woff|ttf|svg)/, loader: 'file-loader?name=[name].[ext]' }, { test: /\.scss$/, exclude: /(node_modules|bower_components)/, loader: extractCSS.extract('style-loader', 'css?!sass?includePaths[]=' + path.resolve(__dirname, 'app/scss')) }, { test: /\.css$/, loader: extractCSS.extract('style-loader', 'css?includePaths[]=' + path.resolve(__dirname, 'app/scss')) }, { test: /\.html$/, loader: "html-loader" }, { test: /\.png$/, loader: "file-loader?name=[hash:8].[name].[ext]" }] }, plugins: [ new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }), extractCSS, //ignoreFiles new webpack.optimize.CommonsChunkPlugin("vendor", "base.js"), htmlPlugin ] }; if (process.env.NODE_ENV == "test" || process.env.NODE_ENV == "dev") { config.devtool = "source-map"; config.output.publicPath = "/"; } if (process.env.NODE_ENV == "production") { config.resolve.modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/msconfig"]; config.output.path = path.resolve(__dirname, "masheng/build") } console.log(config) module.exports = config
代码有点多,但我们可以尝试的去理解他,因为webpack跟gruntjs有点类似,就是全是配置项,所以更多的需要去参考webpack的api来配置。反正我是看晕了,所以我不建议初学者一直纠结于这个配置,还是来看我的配置吧,这里使用到了 process.env.NODE_ENV 这个环境变量来作为webpack的参数,方便我打出不同项目的包,再根据这个特点和 modulesDirectories 的作用,我可以打包的时候指定不同的js文件夹,这有什么用呢,就是说,我的参数(也就是NODE_ENV )是production的时候,js默认的目录是
["web_modules", "node_modules", "bower_components", "app/devconfig", "app/msconfig"];
就是我在代码里import的时候,可以省略掉../../../这种 ,他会先去这几个文件里去查找有没有这个js。其实跟我的这个项目有关,你正常的项目可以忽略掉这一块的配置。
然后我把公用的几个文件打到了一个 base.js 里,
vendor: ["react", "react-dom", 'whatwg-fetch', 'react-router']
new webpack.optimize.CommonsChunkPlugin("vendor", "base.js"), htmlPlugin
这里还用到了一个 template.html ,这个是基于这个html模板新建一个打包后的html引用,为什么不直接用index.html这个呢,主要是要把Index.html这个留热部署,template会加入js的hash文件引用,防止缓存导致的一些问题。
到这里webpack就算配置完成了,可以使用如下方法:
webpack -w //监听打包 webpack -p //压缩打包
既然有了监听打包,为什么还要热部署呢,因为监听打包是会生成文件的,而且速度上也会有影响,接着,我们创建server.js文件
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/"); } var compiler = webpack(config); var server = new WebpackDevServer(compiler, { }); server.listen(8080);
代码比较少,就是它会创建一个端口号为8080的http服务,而且是自动刷新页面,自带reload装逼技能。打开 http://localhost:8080/ 查看是否能够打开!如果没有打开可能是因为你还没有启动服务。
然后在index.html里加入如下代码
<div id="app"></div> <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="base.js"></script> <script src="app.js"></script>
这样基本上一个环境就算搭完了,然后使用 npm start 启动热部署。修改App.jsx里的代码,浏览器就会自动刷新为最新结果。而且本地没有生成打包文件,很方便。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库