React结合webpack的具体使用

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就可以跑起来了；

扫描二维码关注公众号，回复： 8734613 查看本文章

看完了是不是感觉也没那么难呢！那就快来加入我的团队吧，微信二维码：
图片描述

搭建webpack环境

运行webpack转移文件

进一步了解webpack

编写模块

用服务器打开页面

webpack自动刷新

webpack热更新

webpack处理样式

webpack优化项目结构

猜你喜欢