React+Webpack快速上手指南(小结)

2023-09-08 23:45:04 164

前言

这篇文章不是有关React和Webpack的教程，只是一篇能够让你快速上手使用目前这两种热门技术的前端指南，并假设你对两者有一个基本的认识。如果你想先行了解下React，可以放肆的移步至React官方教程，如果你已经使用了其他的模块加载与资源打包技术，不妨也来看看Webpack提供的思路。

webstorm+react+webpack

强烈推荐使用webstorm！。（当然你完全可以使用诸如atom，Sublime之类的编辑器，但之所以选择webstorm是因为它默认支持对reactJSX的语法高亮以及可以手动开启Emmet对jsx的支持，棒棒哒~）

首先请这么组织你的项目结构：

--yourproject
|--app
|--components
|--productBox.jsx
|--main.js
|--build
|--index.html
|--bundle.js(该文件是webpack打包后生成的)

用npm安装react、webpack

默认已经安装了nodejs，并输入：npminit根据提示输入内容并创建package.json文件

然后依次输入：

npminstallreact--save-dev

npminstallwebpack--save-dev

安装最新版本的React与Webpack并将它们保存至package.json内的开发依赖项目中。

创建webpack.config.js配置文件

新建一个名为webpack.config.js的文件，它应该长这个样：

varpath=require('path');

module.exports={
entry:path.resolve(__dirname,'./app/main.js'),
output:{
path:path.resolve(__dirname,'./build'),
filename:'bundle.js',
}
};

其中entry指定了webpack的入口程序，好比c++和java中的main程序一样，我们把最终要插入到页面指定位置的react模板写入main.js中：

app/main.js

varReact=require('react');
varAppComponent=require('./components/productBox.js');
React.render(,document.getElementById('content'));

以及引入的自定义react组件：

app/components/productBox.js

varReact=require('react');
varProductBox=React.createClass({
render:function(){
return(

HelloWorld!

); } }); module.exports=ProductBox;

而output则指定了webpack打包成功之后文件名称以及文件的存放位置。

依照之前指定的项目结构，我们可以在index.html中直接引入打包生成的bundle.js，像这样：

build/index.html





ReactTest

安装并启用webpack-dev-server

webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到类似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！

我们先打开package.json，并找到scripts代码块。在没引入webpack-dev-server之前，我们运行这个项目的姿势是这样的：
修改scripts为

"scripts":{
"build":"webpack"
}

并且执行：

npmrunbuild

项目就跑起来啦，但是每次修改程序我们都要手动输入npmrunbuild来跑项目，这无疑是一件非常蛋疼的事情。但有了webpack-dev-server光环，我们的姿势应该是这样的：

为scripts添加

"scripts":{
"build":"webpack",
"dev":"webpack-dev-server--devtooleval--progress--colors--content-basebuild"
}

ps：dev里各属性值的意思是：

webpack-dev-server:在localhost:8080建立一个Web服务器
--devtooleval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress:显示合并代码进度
--colors:在命令行中显示颜色
--content-basebuild:指向设置的输出目录

并且在index.html里加入：

build/index.html





ReactTest

varpath=require('path'); module.exports={ entry:['webpack/hot/dev-server',path.resolve(__dirname,'./app/main.js')], output:{ path:path.resolve(__dirname,'./build'), filename:'bundle.js', }, module:{ loaders:[{ test:/\.jsx?$/, loader:'babel' },{ test:/\.css$/, loader:'style!css' },{ test:/\.less$/, loader:'style!css!less' },{ test:/\.(png|jpg)$/, loader:'url?limit=25000' }] } };

varpath=require('path'); varnode_modules=path.resolve(__dirname,'node_modules'); varpathToReact=path.resolve(node_modules,'react/dist/react.min.js'); varconfig={ entry:['webpack/hot/dev-server',path.resolve(__dirname,'./app/main.js')], resolve:{ alias:{ 'react':pathToReact } }, output:{ path:path.resolve(__dirname,'./build'), filename:'bundle.js' }, module:{ noParse:[pathToReact], loaders:[{ test:/\.jsx?$/, loader:'babel' },{ test:/\.css$/, loader:'style!css' },{ test:/\.less$/, loader:'style!css!less' },{ test:/\.(png|jpg)$/, loader:'url?limit=25000' }] } }; module.exports=config;

varpath=require('path'); varnode_modules_dir=path.join(__dirname,'node_modules'); vardeps=[ 'react/dist/react.min.js', 'react-router/dist/react-router.min.js', 'moment/min/moment.min.js' ]; varconfig={ entry:['webpack/hot/dev-server',path.resolve(__dirname,'./app/main.js')], resolve:{ alias:{} }, output:{ path:path.resolve(__dirname,'./build'), filename:'bundle.js' }, module:{ noParse:[], loaders:[{ test:/\.jsx?$/, loader:'babel' },{ test:/\.css$/, loader:'style!css' },{ test:/\.less$/, loader:'style!css!less' },{ test:/\.(png|jpg)$/, loader:'url?limit=25000' }] } }; deps.forEach(function(dep){ vardepPath=path.resolve(node_modules_dir,dep); config.resolve.alias[dep.split(path.sep)[0]]=depPath; config.module.noParse.push(depPath); }); module.exports=config;

React+Webpack快速上手指南(小结)

热门推荐

随机推荐