如何在react框架中引入webpack

在react框架中引入webpack的方法：先建立一個資料夾；然後建立一個「package.json」的工程檔案；接著全域安裝webpack；最後透過「npm install」在專案中安裝webpack即可。

本教學操作環境：windows7系統、react17.0.1&&Webpack3.0版本，此方法適用於所有品牌電腦。

推薦教學：react影片教學

什麼是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(&#39;root&#39;));

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的詳細內容。更多資訊請關注PHP中文網其他相關文章！