react + webpack入门（一）

一、所需文档

1、webpack英文文档首页: https://webpack.github.io/

2、babel-loader github地址: https://github.com/babel/babel-loader

二、demo开始

1、请检查你的node.js的版本: node -v，如果低于4.0请更新至4.0以上

2、在磁盘上随便创建一个项目：我的是F:\webpack_workspace\test_second,

（1）npm install webpack -g 全局安装webpack

（2）到新建的test_second目录下，新建package.json。

（3）然后在该目录下执行npm init命令，一路回车，package.json增加了一些内容。

（4）npm install webpack --save-dev 基于本目录安装webpack,运行完该命令会在本录下出现node_modules的目录

（5）新建webpack.config.js 我的文件内容是

module.exports = {
	entry: "./main.js",
	output: {
		filename: "bundle.js"
	},
	module: {
		loaders:[
			{
				test: /\.css$/,
				loader: "style!css!"
			},
			{
				test: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
		    	loader: 'babel?presets[]=react,presets[]=es2015'
			},
			
		]
	}
}

（6）在文档跟目录下新建index.html、main.js、test.jsx

index.html的内容为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学习了解webpack</title>
	</head>
	<body>
		<section id="test"></section>
		<script type="text/javascript" src="./bundle.js" ></script>
	</body>
</html>

main.js的内容为:

import './css/style.css';
var $ = require('jquery');
var React = require('react');
var ReactDom = require('react-dom');
var AppComponent = require('./test.jsx');
ReactDom.render(<AppComponent />, document.getElementById('test'));

test.jsx的内容为：

var React = require('react');
var ProductBox = React.createClass({
  render: function () {
    return (
      <div className="productBox">
        Hello World!
      </div>
    );
  }
});

module.exports = ProductBox;

style.css中的内容为:

body {
	background: goldenrod;
}

（7）一切文件准备就绪后，我们该做点什么呢？由于jsx语法浏览器不认识，所以我们需要将jsx语法转换为浏览器所熟知的js语法，因此我们需要一些工具，这个工具的名字叫babel-loader，那么如何在webpack中使用它呢，babel-loader的git地址为：https://github.com/babel/babel-loader，通过文档可知，我们需要在本项目中加载babel-loader：

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

（8）由于main.js中require了jquery,所以我们也需要将jquery加载到本项目中

npm install jquery --save-dev

（9）在main.js中导入了style.css，那么需要相应的工具去解析它

npm install css-loader style-loader --save-dev

(10)require('react'), require('react-dom')同理也需要相应的工具

npm install react react-dom --save-dev

(11)

React.render()已废弃使用，用ReactDom.render()代替

（12）一切就绪后，在根目录下执行webpack命令，然后访问index.html

（13）如果想时时根据文件的变化而更新浏览器，怎么办呢？

npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev

（14）然后在根目录下运行wenpack-dev-server 访问http://localhost:8080/webpack-dev-server/index.html，以后更改main.js、style.css、test.jsx时都会时时刷新浏览器

（15）注意当入口文件不是项目的根目录，webpack-dev-server命令会无效，我也不知道什么原因，正在学习中。

react + webpack入门（一）

猜你喜欢