国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React結合webpack的具體使用

Leck1e / 1892人閱讀

摘要:結合的具體使用我們一般是使用進行安裝的,這里我為大家推薦一款淘寶出的,這個和差不多,但是比安裝的要快很多安裝命令搭建環境初始化一個文件安裝全局安裝局部安裝安裝來把格式的代碼編譯成安裝來轉譯代碼安裝轉移的插件,

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文件,引入轉移后生成的文件



    
        
        React3
    
    
        

創建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 (
            
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"));

運行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文件



    
        
        React3
    
    
        
//修改

輸入自動刷新命令

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

修改index.html文件



    
        
        React3
    
    
        
//修改

在命令行里運行

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(,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://specialneedsforspecialkids.com/yun/51046.html

相關文章

  • React結合webpack具體使用

    摘要:結合的具體使用我們一般是使用進行安裝的,這里我為大家推薦一款淘寶出的,這個和差不多,但是比安裝的要快很多安裝命令搭建環境初始化一個文件安裝全局安裝局部安裝安裝來把格式的代碼編譯成安裝來轉譯代碼安裝轉移的插件, React結合webpack的具體使用 我們一般是使用npm進行安裝的,這里我為大家推薦一款淘寶出的cnpm,這個和npm差不多,但是比npm安裝的要快很多; 安裝命令 npm ...

    enrecul101 評論0 收藏0
  • React結合webpack具體使用

    摘要:結合的具體使用我們一般是使用進行安裝的,這里我為大家推薦一款淘寶出的,這個和差不多,但是比安裝的要快很多安裝命令搭建環境初始化一個文件安裝全局安裝局部安裝安裝來把格式的代碼編譯成安裝來轉譯代碼安裝轉移的插件, React結合webpack的具體使用 我們一般是使用npm進行安裝的,這里我為大家推薦一款淘寶出的cnpm,這個和npm差不多,但是比npm安裝的要快很多; 安裝命令 npm ...

    LeexMuller 評論0 收藏0
  • webpack4 中最新 React全家桶實戰使用配置指南!

    摘要:安裝配置加載器配置配置文件配置支持自定義的預設或插件只有配置了這兩個才能讓生效,單獨的安裝是無意義的。 showImg(https://segmentfault.com/img/bVbjGNY?w=2847&h=1931); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! 最新React全家桶實戰使用配置指南 這篇文檔 是呂小明老師結合以往的項目經驗 加上自己本身...

    Towers 評論0 收藏0
  • webpack使用-詳解DllPlugin

    摘要:前言時光飛逝,轉眼又偷懶了一個多月什么是文件為動態鏈接庫文件在中,許多應用程序并不是一個完整的可執行文件,它們被分割成一些相對獨立的動態鏈接庫,即文件,放置于系統中。 前言 (時光飛逝,轉眼又偷懶了一個多月) 什么是DLL DLL(Dynamic Link Library)文件為動態鏈接庫文件,在Windows中,許多應用程序并不是一個完整的可執行文件,它們被分割成一些相對獨立的動態鏈...

    KunMinX 評論0 收藏0
  • dva 結合webpack4 改寫動態加載

    摘要:具體就不貼上來了,這里主要是利用采用的動態加載原理進行改造。首先,依賴與,所以最初的想法是采用結合的方式進行改寫。這個過程實際是是的動態加載。 dva現在是構建在umi基礎上,由于項目的原因,我并沒有采用umi架構,而是自己使用webpack4來進行打包,只用dva負責數據流的處理,dva原來的dynamic在webpack4上編譯會有一堆錯誤。具體就不貼上來了,這里主要是利用webp...

    pekonchan 評論0 收藏0

發表評論

0條評論

Leck1e

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<