怎么在react框架中引入webpack

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

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

什么是webpack？

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

webpack的安裝與使用

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

1、npm init //創建一個package.json的工程文件。

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

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

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

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

在index.js中輸入“導出代碼”:

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

將hello變量導出，在main.js接受變量，然后將該變量插入到root標簽中：

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

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

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

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

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

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

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

webpack的在開發生產時的具體功能

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

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

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

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

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

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

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

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

使用webpack構建本地服務器

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

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

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

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

2、port: 設置默認監聽端口，如果省略，默認為“8080”

3、inline: 設置為true，當源文件改變時會自動刷新頁面

4、historyApiFallback: 在開發單頁應用時非常有用，它依賴于HTML5 history API，如果設置為true，所有的跳轉將指向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 //單頁面不跳轉
  },
}

接著我們要在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 即可在瀏覽器中打開本地服務器。

Loaders

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

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

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

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

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

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 //單頁面不跳轉
  },
}

完成以上工作后接著來安裝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文件中進行配置往往使得這個文件顯得太復雜，因此一些開發者支持把babel的配置選項放在一個單獨的名為 ".babelrc" 的配置文件中。因此現在我們就提取出相關部分，分兩個配置文件進行配置（webpack會自動調用.babelrc里的babel配置選項）。

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

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

css的相關安裝

webpack把所有文件當成模塊處理，只要有合適的loaders，它都可以被當做模塊來處理。webpack提供兩個工具處理樣式表css-loader，style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(…)的方法實現 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 //單頁面不跳轉
  },
}

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

這里題外說個問題，我們想在react中使用sass，就在此基礎上先進行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 //單頁面不跳轉
  },
}

之后再style文件夾中創立一個scss文件導入到main.js文件中即可使用了。

eslint的安裝與使用

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

通過配置webpack.congfig.js以及創建.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 //單頁面不跳轉
  },
};
.eslintrc
{
    "parser": "babel-eslint",
    "rules": {
        "semi": [
            "error",
            "always"
        ]
    }
}

eslint的相關規則根據自己的需求來制定即可。

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