這篇文章給大家分享的是有關(guān)怎么在react框架中引入webpack的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出永泰免費做網(wǎng)站回饋大家。

在react框架中引入webpack的方法：首先創(chuàng)建一個文件夾；然后創(chuàng)建一個“package.json”的工程文件；接著全局安裝webpack；最后通過“npm install”在項目中安裝webpack即可。

什么是webpack？

webpack是一個模塊打包工具，在前端中模塊指的就是js，css，圖片等類型文件。webpack支持多種模塊系統(tǒng)，而且兼容js的多種書寫規(guī)范（如ES6），它可以處理模塊間的相互依賴關(guān)系，對靜態(tài)資源進(jìn)行統(tǒng)一打包和發(fā)布。

webpack的安裝與使用

首先我們創(chuàng)立一個文件夾如study，在開始菜單打開cmd，進(jìn)入該文件夾，然后進(jìn)行以下步驟：

1、npm init //創(chuàng)建一個package.json的工程文件。

2、npm install -g webpack // 在全局安裝webpack，若已安裝過則可以跳過。

3、npm install --save-dev webpack //在項目中安裝webpack。

創(chuàng)建完成之后，我們在我們的文件目錄中創(chuàng)建兩個文件夾，為dist（打包后放置的文件夾）與src（我們寫項目的地方）。src文件夾中我們先創(chuàng)立兩個文件為index.js與main.js。dist文件夾中我們創(chuàng)立一個index.html用來讓瀏覽器來讀取顯示。結(jié)構(gòu)如下：

我們在dist/index.html中寫好初始的內(nèi)容，引入的js文件為bundle.js文件，這個文件就是webpack打包后生成的文件。如下圖:

在index.js中輸入“導(dǎo)出代碼”:

module.exports = function() {
  var hello = document.createElement('div');
  hello.textContext = "This is index.js file."
  return hello;
}

將hello變量導(dǎo)出，在main.js接受變量，然后將該變量插入到root標(biāo)簽中：

const hello = require('./index.js');
document.querySelector('#root').appendChild(hello());

接下來我們在根目錄下創(chuàng)建一個webpack.config.js文件用來配置webpack，我們先進(jìn)行簡單的配置，目前主要做的是要設(shè)置內(nèi)容的入口路徑以及打包后文件的存放路徑。在webpack.config.js中寫入以下代碼塊：

module.exports = {
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
}

entry為唯一的入口文件，也就是webpack要從這里讀取，output為輸出，這里設(shè)置的是輸出到dist目錄下的bundle.js文件。接著運行webpack在cmd中運行

".\\node_modules\\.bin\\webpack" 這是在windows中運行的。若已安裝全局則使用 "webpack"也可以。

進(jìn)一步我們不用以上的輸入方式，在package.json中的scripts中加入 "start": "webpack" ，即可通過npm start命令來啟用webpack。

package.json中的腳本部分已經(jīng)默認(rèn)添加了./node_modules/.bin路徑，所以我們也不需要輸入詳細(xì)的路徑地址了。start是一個特殊的腳本名稱，我們也可以起其他的名字，但是如果對應(yīng)的不是start那么我們要啟動時必須要使用npm run {你在script中所用的名字} 如npm run build。

webpack的在開發(fā)生產(chǎn)時的具體功能

開發(fā)時需要調(diào)試代碼，在打包過后如果出錯我們就需要調(diào)試工具來幫我們改正錯誤。Source Map就是幫我們解決這個難題的。他要在我們的webpack.config.js文件中進(jìn)行配置，屬性名為devtool，他有四種選項來讓使用者來選擇。

1、source-map: 在一個單獨的文件中產(chǎn)生一個完整且功能完全的文件。這個文件具有最好的source map，但是它會減慢打包文件的構(gòu)建速度；

2、cheap-module-source-map: 在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提高項目構(gòu)建速度，但是也使得瀏覽器開發(fā)者工具只能對應(yīng)到具體的行，不能對應(yīng)到具體的列（符號），會對調(diào)試造成不便；

3、eval-source-map: 使用eval打包源文件模塊，在同一個文件中生成干凈的完整的source map。這個選項可以在不影響構(gòu)建速度的前提下生成完整的sourcemap，但是對打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。不過在開發(fā)階段這是一個非常好的選項，但是在生產(chǎn)階段一定不要用這個選項；

4、cheap-module-eval-source-map: 這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包后的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具有相似的缺點。

我們這里用第三種方法。在webpack.config.js進(jìn)行以下配置：

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
}

這四種方式從上到下打包速度回越來越快，當(dāng)然隱患越來越多，所以在生產(chǎn)階段還是用第一種為好。

使用webpack構(gòu)建本地服務(wù)器

webpack提供一個可選的可以檢測代碼的修改并自動刷新頁面的本地服務(wù)器。該服務(wù)器是基于node.js的，不過我們需要單獨安裝它作為項目依賴。

npm install --save-dev webpack-dev-server

devserver作為webpack配置選項中的一項，以下是它的一些主要配置選項：

1、contentBase: 默認(rèn)webpack-dev-server會為根文件夾提供本地服務(wù)器，如果想為另外一個目錄下的文件提供本地服務(wù)器，應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到“public"目錄）

2、port: 設(shè)置默認(rèn)監(jiān)聽端口，如果省略，默認(rèn)為“8080”

3、inline: 設(shè)置為true，當(dāng)源文件改變時會自動刷新頁面

4、historyApiFallback: 在開發(fā)單頁應(yīng)用時非常有用，它依賴于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html

代碼如下：

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  devServer:{
    contentBase: "./dist", //讀取目錄
    port: 8000,   //端口號
    inline: true, //實時刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
}

接著我們要在package.json中配置server代碼如下：

{
  "name": "study-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

接著在cmd中輸入 npm run server 即可在瀏覽器中打開本地服務(wù)器。

Loaders

loaders作為webpack的強大功能之一，它的作用就是讓webpack調(diào)用外部腳本和工具來對不同的格式的文件進(jìn)行處理。Loaders需要單獨安裝并且需要在webpack.config.js下的modules關(guān)鍵字下進(jìn)行配置，Loaders的配置選項包括以下幾方面：

1、test：一個匹配loaders所處理的文件的擴展名的正則表達(dá)式。

2、loader: loader的名稱（必需）。

3、include/exclude：手動添加：手動添加需要的文件夾或者屏蔽掉不需要選擇的文件。

4、query: 為loaders提供了額外的設(shè)置選項。

babel

babel是一個編譯js的平臺，它可以幫助你的代碼編譯稱為瀏覽器識別的代碼。并且它還可以把js的擴展語言JSX編譯稱為瀏覽器識別的語句。

安裝依賴包：

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

下面我們在webpack.config.js中來配置loader和babel：

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[{
      test: /\.js$/,   //需要匹配的文件擴展名
      exclude: /node_modules/, // 排除不需要處理的文件夾
      loader: 'babel-loader', //  所用的loader名稱
      query:{
            presets: ['es2015', 'react']  // 支持es5與react
      }
    }]
  },
  devServer:{
    contentBase: "./dist", //讀取目錄
    port: 2333,   //端口號
    inline: true, //實時刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
}

完成以上工作后接著來安裝react

npm install --save react react-dom

接著修改src文件夾中的Index.js與main.js的代碼，react使用的版本"react": "^16.0.0"：

以下是Index.js代碼：

import React from 'react';
import ReactDOM from 'react-dom';
class Greeter extends React.Component{
  render() {
    return (
      <div>
        <span>my god</span>
      </div>
    );
  }
};
export default Greeter

以下為main.js代碼:

import React from 'react';
import ReactDOM from 'react-dom';
import Greeter from './Index';
ReactDOM.render(<Greeter />, document.getElementById('root'));

Babel的配置選項

因為babel有非常多的配置選項,在單一的webpack.config.js文件中進(jìn)行配置往往使得這個文件顯得太復(fù)雜，因此一些開發(fā)者支持把babel的配置選項放在一個單獨的名為 ".babelrc" 的配置文件中。因此現(xiàn)在我們就提取出相關(guān)部分，分兩個配置文件進(jìn)行配置（webpack會自動調(diào)用.babelrc里的babel配置選項）。

將webpack.config.js中的query去掉，建立.babelrc文件寫出一下代碼：

{
  "presets": ["react", "es2015"]
}

css的相關(guān)安裝

webpack把所有文件當(dāng)成模塊處理，只要有合適的loaders，它都可以被當(dāng)做模塊來處理。webpack提供兩個工具處理樣式表css-loader，style-loader，二者處理的任務(wù)不同，css-loader使你能夠使用類似@import 和 url(…)的方法實現(xiàn) require()的功能，style-loader將所有的計算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

安裝loader

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

接著webpack.config.js中添加loaders

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  devServer:{
    contentBase: "./dist", //讀取目錄
    port: 2333,   //端口號
    inline: true, //實時刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
}

接著我們可以創(chuàng)立一個css文件，記好路徑，在main.js中（也就是webpack的入口文件）我們導(dǎo)入css文件即可使用。

這里題外說個問題，我們想在react中使用sass，就在此基礎(chǔ)上先進(jìn)行npm下載

加載： npm install sass-loader node-sass –save-dev

之后我們在webpack.config.js中添加loaders

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.(css|scss)$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  },
  devServer:{
    contentBase: "./dist", //讀取目錄
    port: 2333,   //端口號
    inline: true, //實時刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
}

之后再style文件夾中創(chuàng)立一個scss文件導(dǎo)入到main.js文件中即可使用了。

eslint的安裝與使用

首先安裝依賴包 npm install –save-dev eslint eslint-loader

通過配置webpack.congfig.js以及創(chuàng)建.eslintrc文件來配置好初始值即可在項目中使用eslint。

webpack.config.js:
module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/src/main.js",
  output:{
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader!eslint-loader'
      },
      {
        test: /\.(css|scss)$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  },
  devServer:{
    contentBase: "./dist", //讀取目錄
    port: 2333,   //端口號
    inline: true, //實時刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
};
.eslintrc
{
    "parser": "babel-eslint",
    "rules": {
        "semi": [
            "error",
            "always"
        ]
    }
}

eslint的相關(guān)規(guī)則根據(jù)自己的需求來制定即可。

感謝各位的閱讀！關(guān)于怎么在react框架中引入webpack就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁標(biāo)題：怎么在react框架中引入webpack
文章位置：http://www.chinadenli.net/article4/iphcoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、Google、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)