摘要：結(jié)合的具體使用我們一般是使用進(jìn)行安裝的，這里我為大家推薦一款淘寶出的，這個(gè)和差不多，但是比安裝的要快很多安裝命令搭建環(huán)境初始化一個(gè)文件安裝全局安裝局部安裝安裝來把格式的代碼編譯成安裝來轉(zhuǎn)譯代碼安裝轉(zhuǎn)移的插件，

React結(jié)合webpack的具體使用

我們一般是使用npm進(jìn)行安裝的，這里我為大家推薦一款淘寶出的cnpm，這個(gè)和npm差不多，但是比npm安裝的要快很多；

安裝命令

npm install cnpm -gd

初始化一個(gè)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來轉(zhuǎn)譯代碼

cnpm install --save-dev babel-core

安裝轉(zhuǎn)移的插件，這個(gè)是為了把兩個(gè)文件都轉(zhuǎn)移到一個(gè)文件里面去

 cnpm install babel-preset-env  babel-preset-react --save-dev

創(chuàng)建一個(gè)html文件，引入轉(zhuǎn)移后生成的文件

創(chuàng)建app.js文件，作為導(dǎo)入文件

import bar from "./bar";

bar();

創(chuàng)建bar.js文件，作為導(dǎo)出文件

export default function bar() {
  console.log(1);
}

創(chuàng)建webpack.config.js文件，這個(gè)文件作為配置文件

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}

做完這個(gè)以后，我們就可以運(yùn)行webpack了，

在命令行輸入webpack就可以運(yùn)行

此時(shí)index.html頁面的控制臺(tái)就會(huì)輸出1；

注釋：現(xiàn)在我們的webpack環(huán)境就搭建的差不多了，下面我們來進(jìn)一步的了解webpack；

首先把bar.js改成HelloWorld.js；

安裝兩個(gè)react庫，react和react-dom

這兩個(gè)庫可以一起安裝
cnpm install react react-dom --save-dev

編寫模塊

HelloWorld.js

import React from "react";

class HelloWorld extends React.Component{
    render(){
        return (
            

                Hello World!!!!
            
        )
    }
}

//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(,document.getElementById("app"));

運(yùn)行webpack --watch

在命令行里輸入：
webpack --watch

此時(shí)頁面會(huì)顯示：

注釋：這里我們是用編輯器打開的，下面會(huì)通過服務(wù)器來打開index.html頁面；

安裝webpack-dev-server來起一個(gè)服務(wù)器

全局安裝：
npm install  webpack-dev-server -gd
局部安裝：
npm install  webpack-dev-server --save-dev

輸入命令行，通過服務(wù)器打開頁面

webpack-dev-server --content-base build/

現(xiàn)在的這個(gè)網(wǎng)頁是打不開的，因?yàn)檎也恢鴌ndex.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" },
      ]
    }

修改完以后我們需要運(yùn)行一下webpack --watch

在命令行輸入：
webpack --watch

然后運(yùn)行server

webpack-dev-server --content-base build/

此時(shí)的頁面和剛才的頁面不同，此時(shí)的頁面是用服務(wù)器打開的：

修改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文件

    
        
        
    
    
        

          //修改
    

輸入自動(dòng)刷新命令

 webpack-dev-server --content-base build/  --inline

此時(shí)我們的頁面就可以自動(dòng)刷新了：

安裝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" },//修改
      ]
    }
}

運(yùn)行熱更新

webpack-dev-server --content-base build/  --hot

熱更新和自動(dòng)刷新的區(qū)別就是自動(dòng)刷新是全部刷新，就相當(dāng)于整個(gè)頁面都刷新一次，而熱更新是只刷新你指定的那個(gè)模塊；

安裝style-loader和css-loader

cnpm install style-loader css-loader  --save-dev

整理文件

創(chuàng)建一個(gè)css文件夾，在文件夾里面創(chuàng)建一個(gè)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(,document.getElementById("app"));

修改index.html文件

    
        
        
    
    
        

            
        
          //修改
        
    

在命令行里運(yùn)行

webpack-dev-server --content-base build/  --hot

此時(shí)的頁面和剛才的一樣，只不過是整理了一下；

創(chuàng)建一個(gè)名為components的文件，把HelloWorld.js放進(jìn)去，這個(gè)文件夾就作為模塊文件；

修改app.js

import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./components/HelloWorld";  //修改

import "./css/main.css";
ReactDOM.render(,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"
  }
}

此時(shí)我們就不用每一次都輸入那么長(zhǎng)的命令了，直接在命令行里輸入 npm start就可以跑起來了；

看完了是不是感覺也沒那么難呢！那就快來加入我的團(tuán)隊(duì)吧，微信二維碼：