React结合webpack的具体使用
我们一般是使用npm进行安装的，这里我为大家推荐一款淘宝出的cnpm，这个和npm差不多，但是比npm安装的要快很多；
- 安装命令
npm install cnpm -gd
搭建webpack环境
- 初始化一个package.json文件
npm init -y
- 安装webpack
//全局安装 npm install webpack -gd //局部安装 npm install webpack --save-dev
- 安装babel-loader来把jsx格式的代码编译成javascript
cnpm install --save-dev babel-loader
- 安装babel-core来转译代码
cnpm install --save-dev babel-core
cnpm install babel-preset-env babel-preset-react --save-dev
运行webpack转移文件
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>React3</title>
</head>
<body>
<div id="app">
</div>
<script src="/assets/bundle.js"></script>
</body>
</html>
import bar from './bar'; bar();
export default function bar() {
console.log(1);
}
module.exports = {
entry: './app.js',output: {
filename: 'bundle.js'
}
}
- 做完这个以后，我们就可以运行webpack了，
在命令行输入webpack就可以运行
注释：现在我们的webpack环境就搭建的差不多了，下面我们来进一步的了解webpack；
进一步了解webpack
- 首先把bar.js改成HelloWorld.js；
- 安装两个react库，react和react-dom
这两个库可以一起安装 cnpm install react react-dom --save-dev
编写模块
- HelloWorld.js
import React from 'react';
class HelloWorld extends React.Component{
render(){
return (
<div>
Hello World!!!!
</div>
)
}
}
//export {HelloWorld as default};
export default HelloWorld;
- app.js
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(<HelloWorld/>,document.getElementById("app"));
- 运行webpack --watch
在命令行里输入： webpack --watch
注释：这里我们是用编辑器打开的，下面会通过服务器来打开index.html页面；
用服务器打开页面
- 安装webpack-dev-server来起一个服务器
全局安装： npm install webpack-dev-server -gd 局部安装： npm install webpack-dev-server --save-dev
- 输入命令行，通过服务器打开页面
webpack-dev-server --content-base build/
module.exports = {
entry: './app.js',output: {
filename: 'build/bundle.js' //修改
}
},module: {
rules: [
{ test: /\.js$/,exclude: /node_modules/,loader: "react-hot-loader!babel-loader" },]
}
- 修改完以后我们需要运行一下webpack --watch
在命令行输入： webpack --watch
- 然后运行server
webpack-dev-server --content-base build/
webpack自动刷新
var path = require("path"); //添加
module.exports = {
devtool:'source-map',entry: './app.js',output: {
path:path.resolve(__dirname,"build"),//添加
publicPath:"/assets/",//添加
filename: 'bundle.js'
},]
}
}
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>React3</title>
</head>
<body>
<div id="app"></div>
<script src="/assets/bundle.js"></script> //修改
</body>
</html>
- 输入自动刷新命令
webpack-dev-server --content-base build/ --inline
webpack热更新
- 安装react-hot-loader
cnpm install react-hot-loader --save-dev
- 修改webpack.config.js
var path = require("path");
module.exports = {
devtool:'source-map',publicPath:"/assets/",filename: 'bundle.js'
},//修改
]
}
}
- 运行热更新
webpack-dev-server --content-base build/ --hot
webpack处理样式
- 安装style-loader和css-loader
cnpm install style-loader css-loader --save-dev
- 整理文件
创建一个css文件夹，在文件夹里面创建一个main.css文件； - main.css： body{ background:red; }
var path = require("path");
module.exports = {
devtool:'source-map',{ test: /\.css$/,loader: "style-loader!css-loader" } //修改
]
}
}
import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './components/HelloWorld'; import './css/main.css'; //修改 ReactDOM.render(<HelloWorld/>,document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>React3</title>
</head>
<body>
<div id="app">
</div>
<input type="text" /> //修改
<script src="/assets/bundle.js"></script>
</body>
</html>
- 在命令行里运行
webpack-dev-server --content-base build/ --hot
此时的页面和刚才的一样，只不过是整理了一下；
webpack优化项目结构
import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './components/HelloWorld'; //修改 import './css/main.css'; ReactDOM.render(<HelloWorld/>,document.getElementById("app"));
- 修改package.json
{
"name": "React3","version": "1.0.0","description": "","main": "index.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","start":" webpack-dev-server --content-base build/ --hot" //修改
},"keywords": [],"author": "","license": "ISC","devDependencies": {
"babel-core": "^6.25.0","babel-loader": "^7.1.1","babel-preset-env": "^1.6.0","babel-preset-react": "^6.24.1","css-loader": "^0.28.4","style-loader": "^0.18.2","webpack": "^3.4.0","webpack-dev-server": "^2.6.1"
},"dependencies": {
"react": "^15.6.1","react-dom": "^15.6.1"
}
}
此时我们就不用每一次都输入那么长的命令了，直接在命令行里输入 npm start就可以跑起来了；
看完了是不是感觉也没那么难呢！那就快来加入我的团队吧，微信二维码：
