React結合webpack的具體使用

時間 2019-12-04

原文原文鏈接

React結合webpack的具體使用javascript

咱們通常是使用npm進行安裝的，這裏我爲你們推薦一款淘寶出的cnpm，這個和npm差很少，可是比npm安裝的要快不少；css

安裝命令

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；html

註釋：如今咱們的webpack環境就搭建的差很少了，下面咱們來進一步的瞭解webpack；java

進一步瞭解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頁面；node

用服務器打開頁面

安裝webpack-dev-server來起一個服務器

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

輸入命令行，經過服務器打開頁面

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

如今的這個網頁是打不開的，由於找不着index.html文件，因此咱們須要從新整理一下文件，整理後的文件：react

整理完文件後，須要修改一下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

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

熱更新和自動刷新的區別就是自動刷新是所有刷新，就至關於整個頁面都刷新一次，而熱更新是隻刷新你指定的那個模塊；web

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

此時的頁面和剛纔的同樣，只不過是整理了一下；npm

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"
  }
}