本文介紹了webpack 2.x配置reactjs基本開(kāi)發(fā)環(huán)境詳解，分享給大家，具體如下：

當(dāng)前webpack版本：2.2；react: 15.4.2

webpack從1.x升級(jí)到2.x替換了幾個(gè)接口，包括module.loaders這樣的重要接口已被棄用（詳細(xì)變更）。官網(wǎng)目前已不推薦使用1.x版本，早上折騰一番，根據(jù)2.2版本配置了react基本的開(kāi)發(fā)環(huán)境，滿足不太復(fù)雜的web應(yīng)用開(kāi)發(fā)，后期會(huì)逐步優(yōu)化配置文件。

如果您之前使用過(guò)webpack，需要改動(dòng)的地方并不大。下文假定您沒(méi)有接觸過(guò)類似的打包工具（但了解npm、jsx再好不過(guò)），以跟我一樣一個(gè)新手的身份認(rèn)識(shí)這些，如有不妥之處望不吝賜教。

如果您的react項(xiàng)目是引入的以下三個(gè)js文件在瀏覽器端編譯jsx，那么不需要用webpack做開(kāi)發(fā)環(huán)境。

 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

但是在產(chǎn)品上線階段，我們很不推薦這樣做。1，用戶需要下載這三個(gè)文件，浪費(fèi)了帶寬；2，下載完成后需要在瀏覽器端編譯jsx文件，浪費(fèi)了時(shí)間和資源。

如果將開(kāi)發(fā)階段的項(xiàng)目代碼打包編譯為一個(gè)js文件，再推上線，那么：1，將HTTP請(qǐng)求減少為1個(gè)；2，不需要用戶端再浪費(fèi)時(shí)間和資源去編譯，直接運(yùn)行上線前已編譯好的js代碼。

如果是前者，引入項(xiàng)目js代碼的script標(biāo)簽type值為"text/babel"；如果是后者，type值為"text/javascript"。

如何做？

一，安裝nodejs，使用它附帶的npm包管理工具。為什么要用npm？后期會(huì)下載react依賴、babel依賴、webpack工具，使用npm方便很多。不使用npm也可以，但無(wú)疑會(huì)增加諸多困難。

二，新建一個(gè)項(xiàng)目文件夾，在文件夾內(nèi)打開(kāi)終端，即Windows下的命令行（Shift+鼠標(biāo)右鍵），運(yùn)行 npm init ，如果沒(méi)有特殊要求，可一直按回車鍵到最后一步。

三，在終端內(nèi)執(zhí)行如下命令下載需要的所有依賴和工具。

四，配置webpack配置文件。在根目錄下，即與package.json同級(jí)下新建webpack.config.js文件，在文件內(nèi)部寫(xiě)入如下內(nèi)容

// webpack.config.js
var webpack = require("webpack");
var path = require("path");

module.exports = {
  entry: './dev/entry.jsx', // 入口文件
  devtool: 'source-map',　　// 調(diào)試時(shí)定位到編譯前的代碼位置，推薦安裝react插件
  output: {
    path: path.resolve(__dirname, "./dist/js/"),
    filename: 'bundle.js' // 打包輸出的文件
  },
  module: {
    rules: [{
      test: /\.jsx?$/, // test 去判斷是否為.js或.jsx,是的話就是進(jìn)行es6和jsx的編譯
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    // 現(xiàn)在你import文件的時(shí)候可以直接使用import Func from './file'，不用再使用import Func from './file.js'
    extensions: ['.js', '.jsx', '.json', '.coffee']
  }
};

目錄結(jié)構(gòu)：

app
  |__dev
  |  |__components
  |  |__entry.jsx
  |__dist
  |  |__css
  |  |__js
  |    |__bundle.js
  |  |__index.html
  |__node_modules
  |__package.json
  |__webpack.config.js

對(duì)于這份配置文件有如下說(shuō)明

1，標(biāo)紅的部分可自定義

2，react項(xiàng)目文件可以用js格式，也可以用jsx格式，但是輸出文件為在HTML文件中引用的文件，必須為js格式。

3，本配置入口文件在dev目錄下，輸出文件在dist目錄下，具體可自定義配置。

4，module.rules為2.x新增的接口，代替原先使用的module.loaders

5，去掉query會(huì)報(bào)錯(cuò)，也可將其規(guī)則寫(xiě)入package.json文件，具體寫(xiě)法見(jiàn)參考鏈接

五，在package.json文件scripts部分添加如下代碼

 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --hot --open --content-base ./dist/",
  "deploy": "webpack -p --progress --config webpack.config.js"
 },

注：--content-base參數(shù)指定根html文件所在位置。

六，開(kāi)發(fā)階段在終端使用 npm start 自動(dòng)編譯代碼并刷新；使用 npm run build 編譯生產(chǎn)環(huán)境代碼。

注：webpack-dev-server自動(dòng)編譯代碼和刷新瀏覽器并不會(huì)將編譯后的文件寫(xiě)入磁盤(pán)，而是保持在內(nèi)存中，因此此時(shí)在html文件中引入的腳本文件src為"bundle.js"，沒(méi)有任何路徑，如果在webpack.config.js的ouput中指定了"publicPath"，情況又有所不同，詳見(jiàn)參考鏈接第三個(gè)。

附：webpack編譯過(guò)程中常用的參數(shù)，可在scripts編譯命令中分別配置

• webpack 開(kāi)發(fā)環(huán)境下編譯
• webpack -p 產(chǎn)品編譯及壓縮
• webpack --watch 開(kāi)發(fā)環(huán)境下持續(xù)的監(jiān)聽(tīng)文件變動(dòng)來(lái)進(jìn)行編譯(非?？?)
• webpack -d 引入 source maps

eslint支持：

npm i eslint babel-eslint eslint-plugin-react --save-dev

新建一個(gè).eslintrc文件，寫(xiě)入react支持基本參數(shù)

{
  "plugins": ["react"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "babel-eslint"
}

推薦安裝編輯器對(duì)應(yīng)的eslint插件，可以在界面實(shí)時(shí)顯示錯(cuò)誤信息。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論