该文章适合对react有一定认识的人阅读。
通过npm使用react，并用webpack进行打包
- 创建目录
创建一个根目录，目录名为：react-webpack-demo，再使用npm init -y进行初始化，生成package.json文件。
$ mkdir react-webpack-demo
$ cd react-webpack-demo/
$ npm init -y
那么此时你就会发现文件夹里面多了一个package.json文件。
- 添加依赖包
注：因为npm速度太慢，所以我就使用了cnpm，速度会快很多。
下载cnpm：
$ npm install -g cnpm --registry=http://r.cnpmjs.org
因为我们要使用 React, 所以我们需要先安装react和react-dom这两个依赖包，--save 命令用于将包添加至 package.json 文件的dependencies中。
$ cnpm install react react-dom --save
- 添加插件
我们也要安装一些 babel 插件，--save-dev是将插件添加到devDependencies中。
$ cnpm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
- 安装webpack以及webpack-dev-server依赖
webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。
$ cnpm install webpack webpack-dev-server --save-dev
- 创建文件
接下来我们创建一些基本的文件：
$ touch index.html
$ touch webpack.config.js
$ mkdir public
$ cd public
$ touch main.js
$ mkdir components
$ cd components
$ touch App.js
- index.html
设置 div id = "app" 为我们应用的根元素。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>react-webpack-demo</title>
</head>
<body>
<div id = "app"></div>
</body>
</html>
- App.js
先写App组件，内容只是显示输出Hello World!.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!
</div>
);
}
}
export default App;
- main.js
我们需要引入组件并将其渲染到根元素 app 上，这样我们才可以在浏览器上看到它。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
ReactDOM.render(<App />, document.getElementById('app'));
- 设置编译器，服务器，载入器
打开 webpack.config.js 文件添加以下代码:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './public/main.js'),
output: {
path: path.resolve(__dirname, './public/out'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['babel-loader?presets[]=es2015,presets[]=react']
}]
}
};
entry：入口文件。 output里面的path：打包输出的路径。 filename：打包后的名字
配置完成后，在package.json里面将scripts里面的test变成下面的webpack：
"scripts": {
"build": "webpack"
}
- 在index.html中引入bundle.js文件
<script src="./public/out/bundle.js"></script>
此时在终端输入
$ npm run build
然后打开index.html，然后在浏览器中运行，终于显示出了Hello World!
源码地址：https://github.com/yangzhanmei/react-webpack-demo
网友评论