今天试着用webpack里面安装了一下react,抱着试试看的心态。然后在百度上一顿搜索方法,结果都是无疾而终,让人不开心。最终还是google救了我。这边记录一下安装过程。
安装了一个简易的react-dom做了一个实验。安装过程如下所示:最终的结果目录如下所示:
- 首先安装webpack.
— mkdir douban
— cd douban
— npm init -y(生成package.json文件) 根目录下如下操作 新建index.html文件
— mkdir dist
— cd dist
— touch index.html
在index.html中加入如下内容
<!DOCTYPE html><html> <head> <title>hello world</title> </head> <body> <div id="app"></div> <script src="/bundle.js"></script> </body>
接下来安装webpack,在根目录下:
— npm install –save-dev webpack webpack-dev-server webpack-cli修改package.json文件,在“scripts”中加入”start”: “webpack-dev-server –config ./webpack.config.js –mode development
根目录下新建配置文件 webpack.config.js
— touch webpack.config.js然后在文件中加入如下内容:
module.exports = { entry: [ './src/index.js' ], output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' } }
entry指定入口文件,ouput指定输出文件位置,devserver指定网页中存的内容
创建index.js文件
— mkdir src
— cd src
— touch index.js
在index.js 文件加入console.log(“hello,world!”)使用npm start 即可运行程序啦!
安装babel
babel插件 主要是将es6 转为es5兼容的格式
— npm install –save-dev babel-core babel-loader babel-preset-env
— npm install –save-dev babel-preset-stage-2
— npm install –save-dev babel-preset-react
观察package.json文件变化,如下图所示:
webpack.config.js 文件变化,如下图所示:根目录新建.babelrc文件
— touch .babelrc
添加如下内容:{ "presets": [ "env", "react", "stage-2" ]}
安装react
— npm install –save react react-dom
可以添加简单的测试代码,来测试是否成功import React from ‘react’;
import ReactDOM from ‘react-dom’;
const title = ‘My Minimal React Webpack Babel Setup’;
ReactDOM.render(<div>{title}</div>, document.getElementById('app')
);
安装 react-hot-loader
— npm install –save-dev react-hot-loader
然后改变webpack.config.js文件如下所示:
- 在index.js 文件末尾添加 module.hot.accept();
然后 npm start 运行程序!成功!接下来可以做想做的事情了~