webpack入門及結(jié)合react進(jìn)行開發(fā)

OldPanda 發(fā)布于2019-08-20 18:19 / 2685人閱讀

摘要：最后還可以跟我們的進(jìn)行結(jié)合管理代碼什么是說明白點(diǎn)就是模塊打包機(jī)，可以很好的管理我們的模塊，可以對瀏覽器進(jìn)行更好的兼容。安裝首選我們要安裝，中已經(jīng)給我們下載了我們通過進(jìn)行安裝管理。

webpack入門及結(jié)合react進(jìn)行開發(fā)

重要提示（2017年7月26號更新）

本文介紹的是最新版的3.4.1，并且其中又跟React結(jié)合的例子！

寫在前邊

前端技術(shù)更新太快，從幾年前的jquery、djto、Prototype到react、vue、angular，自動(dòng)化工具也是這樣從之前的grunt、requireJs到現(xiàn)在的gulp、webpack、jspm、包管理工具也是從之前的bower、npm到現(xiàn)在的yern！技術(shù)更新?lián)Q代特別快，所以我們開發(fā)人員每天應(yīng)該有倆個(gè)小時(shí)以上來學(xué)習(xí)技術(shù)！

什么是webpack，為什么我們要使用webpack 為什么我們要使用webpack

現(xiàn)今的很多網(wǎng)頁其實(shí)可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實(shí)踐方法

模塊化 通過webpack我們使用它可以很好的管理我們的前端代碼

打包通過webpack我們可以進(jìn)行應(yīng)用打包，編輯、壓縮代碼、圖片

loader 通過webpack我們可以通過loader進(jìn)行編輯我們的模塊，把我們的文件或者模塊進(jìn)行編輯，編輯成我們的javascript或者網(wǎng)頁能看懂的語言！

通過webpack可以編輯less、sass、postcss等css預(yù)處理器。

最后還可以跟我們的react、vue進(jìn)行結(jié)合管理代碼

什么是webpack

WebPack說明白點(diǎn)就是模塊打包機(jī)，可以很好的管理我們的模塊，可以對瀏覽器進(jìn)行更好的兼容。

開始使用Webpack

現(xiàn)在開始使用最新版的webpack，我寫的比較簡單希望對你們有所幫助，看完之后可以使用我們的webpack。

安裝

首選我們要安裝nodeJs，nodeJs中已經(jīng)給我們下載了npm我們通過npm進(jìn)行安裝管理。

項(xiàng)目初始化

npm init -y

安裝webpack

npm install webpack -gd //全局
npm install webpack --save-dev  //局部

安裝后之后我們就可以進(jìn)行打包打包使用

創(chuàng)建app.js

import bar from "./bar";

bar();

創(chuàng)建bar.js

export default function bar() {
  document.write("Hello World")
}

index.html


  
    ...
  
  
    ...
       //bundle使我們進(jìn)行打包的文件

在webpack.config.js中進(jìn)行配置

module.exports = {
  entry: "./app.js",    //entry引入的文件
  output: {
    filename: "bundle.js"    //output  打包到的文件
  }
}

命令行運(yùn)行webpack，打開瀏覽器你會(huì)看到我們的Hello World，這就是最簡單的webpack使用！

下邊結(jié)合react進(jìn)行開發(fā) 安裝babel-lorder

通過babel我們可以編輯Es6+、jsx等，我們開發(fā)現(xiàn)代代碼必不可少的一款工具！

npm install --save-dev babel-loader babel-core

在這里我要介紹一下cnpm，我們在配置環(huán)境的過程中可能會(huì)遇到自己網(wǎng)速慢，或者npm服務(wù)器慢的特點(diǎn)，我們可以通過淘寶鏡像cnpm進(jìn)行安裝，跟咱們的npm一樣不過是淘寶鏡像過來的，因此不受外網(wǎng)服務(wù)器影響。安裝跟npm一樣，我們做的額只不過是把前邊的npm改成cnpm

安裝cnpm

npm install cnpm -gd

轉(zhuǎn)譯插件

我們需要安裝一些插件才可以進(jìn)行我們的jsx編輯，因?yàn)槲覀兊膔eact就是通過jsx寫的

npm install babel-preset-env  babel-preset-react --save-dev
//淘寶鏡像安裝
cnpm install babel-preset-env  babel-preset-react --save-dev

在主項(xiàng)目錄下的babelrc進(jìn)行配置

{
  "presets": ["env","babel-preset-react"]
}

安裝 react庫

npm install react react-dom --save

這樣我們就可以進(jìn)行react和webpack結(jié)合進(jìn)行模塊管理。

Hello World實(shí)例

我們的項(xiàng)目結(jié)構(gòu)如下圖：

把index.html、bundle.js放在build文件夾下邊，我們的入口文件app.js文件地址不變。

index.html




    
    
    
    webpack

app.js

"use strict"
import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./components/HelloWorld";
import "./css/main.css";

ReactDOM.render(
    ,
    document.getElementById("app")
);

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進(jìn)行項(xiàng)目啟動(dòng)，我們看到的是本地文件的網(wǎng)址，我們需要安裝下邊的環(huán)境插件啟動(dòng)端口

webpack-dev-server啟動(dòng)端口

我們的webpack啟動(dòng)的端口8080：端口

npm install  webpack-dev-server -gd  //全局
npm install  webpack-dev-server --save-dev  //局部
//我們的文件需要在全局進(jìn)行安裝

運(yùn)行 webpack-dev-server --content-base build/ 默認(rèn)啟動(dòng)是運(yùn)行 webpack-dev-server，由于我們創(chuàng)建了文件框架，所以需要指定目錄文件運(yùn)行 --content-base build/這樣我們就可以進(jìn)行文件刷新，發(fā)現(xiàn)很不方便，需要進(jìn)行文件自動(dòng)刷新，或者模塊熱更新

首先需要配置webpakc.comfig.js文件

var path = require("path");
......
output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "build/bundle.js"
  }

運(yùn)行命令

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

這樣就可以進(jìn)行文件更新，但是這樣做每次都大刷頁面，還可以更好一點(diǎn)，比如更新其中的一個(gè)模塊其他的不刷新，

安裝react-hot-loader

npm install react-hot-loader --save-dev

繼續(xù)配置webpack配置文件

rules: [
     {test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader"},
     {test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader"}
  ]

配置完的大概是這樣

var path = require("path");
module.exports = {
  devtool:"source-map",
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "build/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"}
  ]
}
}

剛開始就說過webpack很強(qiáng)大，我們可以通過安裝loader進(jìn)行處理，比如說css、less、sass等

安裝style-loader css-loader

npm install style-loader css-loader --save-dev

這樣我們就可以引入css到我們的入口文件，今天遇到一點(diǎn)小坑，因?yàn)橹坝玫绞莏spm，我在文件后邊加了個(gè)！
跟我們引入其他模塊一樣，css也是我們的模塊

import "./css/main.css";

這樣就介紹的差不多了，下邊給大家介紹一款webpack模塊瀏覽器調(diào)試的小東西，
我們只需要在我們的webpack配置文件中加入下邊的代碼就可以進(jìn)行代碼調(diào)試！

module.exports = {
  devtool:"source-map"
  }

寫在最后

如果覺得對你有所幫助，可以點(diǎn)贊收藏，如果發(fā)現(xiàn)哪里寫的不好可以在下邊評論指出，你的意見就是我繼續(xù)編寫下去的動(dòng)力，如果有什么問題可以評論指出我會(huì)為你進(jìn)行解答！

個(gè)人創(chuàng)建了一個(gè)群，因?yàn)槿憾S碼有時(shí)間限制，大家可以掃描我的個(gè)人微信！

GPU云服務(wù)器云服務(wù)器 webpack入門 react開發(fā)神器 docker react 開發(fā) webrtc音視頻開發(fā)react

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84352.html

發(fā)表評論

登陸后可評論

0條評論

OldPanda

男|高級講師

我要關(guān)注我要私信

TA的文章

數(shù)據(jù)結(jié)構(gòu) | 數(shù)組模擬實(shí)現(xiàn)順序表

閱讀 2426·2021-11-19 09:40
畢設(shè)-基于LoRa的智能農(nóng)業(yè)大棚(一)

閱讀 3591·2021-10-12 10:12
個(gè)人用云主機(jī)能做什么-云主機(jī)能做什么？

閱讀 1899·2021-09-22 15:04
Pia雲(yún)暑期重磅7折優(yōu)惠券piayunnb，香港CN2直連大陸1H2G僅17.5元/月

閱讀 2912·2021-09-02 09:53
零React基礎(chǔ)入門Amaze UI Touch！

閱讀 776·2019-08-29 11:03
CSS Stacking Context 里那些鮮為人知的坑

閱讀 1132·2019-08-28 18:11
JS中數(shù)據(jù)類型、內(nèi)置對象、包裝類型對象、typeof關(guān)系

閱讀 1736·2019-08-23 15:28
Vue中watch對象內(nèi)屬性的方法

閱讀 3588·2019-08-23 15:05

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack入門及結(jié)合react進(jìn)行開發(fā)

相關(guān)文章

TypeScript極速完全入門-3ts結(jié)合react進(jìn)行項(xiàng)目開發(fā)

webpack 教程資源收集

庫，組件，框架 - 收藏集 - 掘金

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

前端相關(guān)大雜燴

發(fā)表評論

0條評論

OldPanda

男|高級講師

TA的文章

數(shù)據(jù)結(jié)構(gòu) | 數(shù)組模擬實(shí)現(xiàn)順序表

畢設(shè)-基于LoRa的智能農(nóng)業(yè)大棚(一)

個(gè)人用云主機(jī)能做什么-云主機(jī)能做什么？

Pia雲(yún)暑期重磅7折優(yōu)惠券piayunnb，香港CN2直連大陸1H2G僅17.5元/月

零React基礎(chǔ)入門Amaze UI Touch！

CSS Stacking Context 里那些鮮為人知的坑

JS中數(shù)據(jù)類型、內(nèi)置對象、包裝類型對象、typeof關(guān)系

Vue中watch對象內(nèi)屬性的方法

最新活動(dòng)