【前端】一步一步使用webpack+react+scss脚手架重构项目 - 张泰峰(2)_H5之家

var React = require("react"); var ReactDOM = require("react-dom"); ReactDOM.render( <div> <h1>welcome</h1> </div> ,document.querySelector(".content") );

　　这里一定要用 ReactDOM.render 老的版本react.render会报语法错误。

配置babel-loader

　　在webpack.config.js添加babel-loader用来解析jsx和es6的代码:

); module.exports = { entry:{ :path.join(__dirname,) //入口文件 name对应输出的[name] }, output:{ path:path.join(__dirname,), //输出路径 filename: }, module:{ loader:[ { test:/\.(js|jsx)$/, //这是配置加载文件的规则值是正则表达式这里写的意思是.js .jsx结尾的文件加载loader loader:, exclude:/node_module/, //这个目录不需要加载loader query:{ presets:[,] //加载loader的presets } } ] } }

　　配置了module下面的loaders。

　　然后npm run test 开启服务，测试一下代码是否可以运行。

　　顺利的话，这里应该能看到welcome了：

　　现在的代码结构显然过于简单，下面我们在app文件目录下新建两个目录 component 和 views。

　　先在component 文件夹下新建hello.jsx,写一些代码：

import React ; class Hello extends React.Component{ constructor(props){ super(props); this.propTypes = { text:React.PropTypes.string } } render(){ > hello <span>{this.props.text}</span> </div> } } module.exports = Hello;

　　一般我的import 语法用来表示react组件或其他资源的引入，require语法用来表示js的引入，另外这里用的是es6的class语法。关于es6，在文章下面有浅略说明。

　　然后再views新建index.jsx，这里可以写主要的页面代码:

import React ; import Hello ; //引入hello组件 class Index extends React.Component{ render(){ > <Hello text=></Hello> </div> } } module.exports = Index;

　最后main.js引入index，把index加入rander就可以看到效果了：

); ); import Index ; //引入index ReactDOM.render( <div> <Index></Index>　　//插入index视图 </div> ,document.querySelector() );

查看效果：

到了这一步，基本的视图结构就完成了，接下来配置css的加载，基本和react的方式一样，加载对应的loader，解析对应的文件。

配置css：

　　视图解决了，现在我们要解决css的引入问题，这里可以选择的就比较多 css、sass、less等都可以，我选择的是css，因为我的sass文件可以使用ruby的sass编译，在编辑保存时已经自动编译成css了，个人觉得这样管理起来更加方便。

　　首先还是安装依赖,运行：

　　npm i css-loader file-loader style-loader url-loader --save-dev

　　file-loader url-loader 是用来编译图片资源的，它会将url()中的静态资源打包编译成base64格式，这里需要注意，不要在css中写找不到文件的路径，否则会报错编译失败。

　　安装完成后配置css-loader:

); module.exports = { entry:{ :path.join(__dirname,) //入口文件 name对应输出的[name] }, output:{ path:path.join(__dirname,), //输出路径 filename: }, module:{ loaders:[ { test:/\.(js|jsx)$/, //这是配置加载文件的规则值是正则表达式这里写的意思是.js .jsx结尾的文件加载loader loader:, exclude:/node_module/, //这个目录不需要加载loader query:{ presets:[,] //加载loader的presets } }, { test:/\.css$/, //配置.css后戳的解析 loader: },
　　　　　　　{
　　　　　　　　　test:/\.(png|jpg)$/, //配置静态文件解析
　　　　　　　　　loader:"url-loader?limit=8192"
　　　　　　　} ] } }