怎么在react框架中引入webpack

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

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

什么是webpack？

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

webpack的安裝與使用

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

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

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

3、npm install --save-dev webpack //在項(xiàng)目中安裝webpack。

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

我們在dist/index.html中寫好初始的內(nèi)容，引入的js文件為bundle.js文件，這個(gè)文件就是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)建一個(gè)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文件。接著運(yùn)行webpack在cmd中運(yùn)行

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

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

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

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

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

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

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

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

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

我們這里用第三種方法。在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提供一個(gè)可選的可以檢測代碼的修改并自動(dòng)刷新頁面的本地服務(wù)器。該服務(wù)器是基于node.js的，不過我們需要單獨(dú)安裝它作為項(xiàng)目依賴。

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

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

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

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

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

4、historyApiFallback: 在開發(fā)單頁應(yīng)用時(shí)非常有用，它依賴于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,   //端口號(hào)
    inline: true, //實(shí)時(shí)刷新
    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的強(qiáng)大功能之一，它的作用就是讓webpack調(diào)用外部腳本和工具來對不同的格式的文件進(jìn)行處理。Loaders需要單獨(dú)安裝并且需要在webpack.config.js下的modules關(guān)鍵字下進(jìn)行配置，Loaders的配置選項(xiàng)包括以下幾方面：

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

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

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

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

babel

babel是一個(gè)編譯js的平臺(tái)，它可以幫助你的代碼編譯稱為瀏覽器識(shí)別的代碼。并且它還可以把js的擴(kuò)展語言JSX編譯稱為瀏覽器識(shí)別的語句。

安裝依賴包：

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$/,   //需要匹配的文件擴(kuò)展名
      exclude: /node_modules/, // 排除不需要處理的文件夾
      loader: 'babel-loader', //  所用的loader名稱
      query:{
            presets: ['es2015', 'react']  // 支持es5與react
      }
    }]
  },
  devServer:{
    contentBase: "./dist", //讀取目錄
    port: 2333,   //端口號(hào)
    inline: true, //實(shí)時(shí)刷新
    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的配置選項(xiàng)

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

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

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

css的相關(guān)安裝

webpack把所有文件當(dāng)成模塊處理，只要有合適的loaders，它都可以被當(dāng)做模塊來處理。webpack提供兩個(gè)工具處理樣式表css-loader，style-loader，二者處理的任務(wù)不同，css-loader使你能夠使用類似@import 和 url(…)的方法實(shí)現(xiàn) require()的功能，style-loader將所有的計(jì)算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入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,   //端口號(hào)
    inline: true, //實(shí)時(shí)刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
}

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

這里題外說個(gè)問題，我們想在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,   //端口號(hào)
    inline: true, //實(shí)時(shí)刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
}

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

eslint的安裝與使用

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

通過配置webpack.congfig.js以及創(chuàng)建.eslintrc文件來配置好初始值即可在項(xiàng)目中使用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,   //端口號(hào)
    inline: true, //實(shí)時(shí)刷新
    historyApiFallback: true //單頁面不跳轉(zhuǎn)
  },
};
.eslintrc
{
    "parser": "babel-eslint",
    "rules": {
        "semi": [
            "error",
            "always"
        ]
    }
}

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

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