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转移文件
- 创建一个html文件，引入转移后生成的文件
<!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>- 创建app.js文件，作为导入文件
import bar from './bar';
bar();- 创建bar.js文件，作为导出文件
export default function bar() {
console.log(1);
}- 创建webpack.config.js文件，这个文件作为配置文件
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
}
}- 做完这个以后，我们就可以运行webpack了，
在命令行输入webpack就可以运行此时index.html页面的控制台就会输出1；
注释：现在我们的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/现在的这个网页是打不开的，因为找不着index.html文件，所以我们需要重新整理一下文件，整理后的文件：
- 整理完文件后，需要修改一下webpack.config.js文件
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自动刷新
- 修改webpack.config.js文件
var path = require("path"); //添加
module.exports = {
devtool:'source-map',
entry: './app.js',
output: {
path:path.resolve(__dirname,"build"), //添加
publicPath:"/assets/", //添加
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
]
}
}- 修改index.html文件
<!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',
entry: './app.js',
output: {
path:path.resolve(__dirname,"build"),
publicPath:"/assets/",
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },//修改
]
}
}- 运行热更新
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;
}
- 修改webpack.config.js文件
var path = require("path");
module.exports = {
devtool:'source-map',
entry: './app.js',
output: {
path:path.resolve(__dirname,"build"),
publicPath:"/assets/",
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
{ test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader" } //修改
]
}
}- 修改app.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
import './css/main.css'; //修改
ReactDOM.render(<HelloWorld/>,document.getElementById("app"));- 修改index.html文件
<!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优化项目结构
- 创建一个名为components的文件，把HelloWorld.js放进去，这个文件夹就作为模块文件；
- 修改app.js
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就可以跑起来了；
看完了是不是感觉也没那么难呢！那就快来加入我的团队吧，微信二维码：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。