npm+webpack下创建React项目步骤
2016-12-26 本文已影响0人
格兰特7
npm是一个js的管理工具库，webpack是js的打包工具，可以把多个js文件打包成一个js文件，自动判断依赖关系
- 安装node.js，自带了npm
- 创建目录，并cmd进入目录
- npm install webpack -g 全局安装webpack
- npm install react react-dom babel-preset-react babel-loader --save-dev 此步安装react库和相关解析库
- 创建webpack.config.js文件，这是webpack的配置文件
module.exports = {
entry: __dirname + "/app/main.js",//app是源代码目录，main是唯一入口文件
output: {
path: __dirname + "/build",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{ presets:['react'] }
}]
}
}
- 在app目录下创建main.js文件
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
- 在build目录创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='example'>
</div>
<script src="bundle.js"></script>
</body>
</html>
- 在项目根目录下运行webpack
