本文介紹了webpack 2.x配置reactjs基本開發(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基本的開發(fā)環(huán)境，滿足不太復(fù)雜的web應(yīng)用開發(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做開發(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í)間和資源。

如果將開發(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)打開終端，即Windows下的命令行（Shift+鼠標(biāo)右鍵），運(yùn)行 npm init ，如果沒(méi)有特殊要求，可一直按回車鍵到最后一步。

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

代碼如下:
npm install react react-dom babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev

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

// webpack.config.jsvar 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']  }};