本文介紹了webpack 2.x配置reactjs基本開發環境詳解，分享給大家，具體如下：
當前webpack版本：2.2；react: 15.4.2
webpack從1.x升級到2.x替換了幾個接口，包括module.loaders這樣的重要接口已被棄用（詳細變更）。官網目前已不推薦使用1.x版本，早上折騰一番，根據2.2版本配置了react基本的開發環境，滿足不太復雜的web應用開發，後期會逐步優化配置文件。
如果您之前使用過webpack，需要改動的地方並不大。下文假定您沒有接觸過類似的打包工具（但了解npm、jsx再好不過），以跟我一樣一個新手的身份認識這些，如有不妥之處望不吝賜教。
如果您的react項目是引入的以下三個js文件在浏覽器端編譯jsx，那麼不需要用webpack做開發環境。
<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>
但是在產品上線階段，我們很不推薦這樣做。1，用戶需要下載這三個文件，浪費了帶寬；2，下載完成後需要在浏覽器端編譯jsx文件，浪費了時間和資源。
如果將開發階段的項目代碼打包編譯為一個js文件，再推上線，那麼：1，將HTTP請求減少為1個；2，不需要用戶端再浪費時間和資源去編譯，直接運行上線前已編譯好的js代碼。
如果是前者，引入項目js代碼的script標簽type值為"text/babel"；如果是後者，type值為"text/javascript"。
如何做？
一，安裝nodejs，使用它附帶的npm包管理工具。為什麼要用npm？後期會下載react依賴、babel依賴、webpack工具，使用npm方便很多。不使用npm也可以，但無疑會增加諸多困難。
二，新建一個項目文件夾，在文件夾內打開終端，即Windows下的命令行（Shift+鼠標右鍵），運行 npm init ，如果沒有特殊要求，可一直按回車鍵到最後一步。
三，在終端內執行如下命令下載需要的所有依賴和工具。
復制代碼 代碼如下:
npm install react react-dom babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev
四，配置webpack配置文件。在根目錄下，即與package.json同級下新建webpack.config.js文件，在文件內部寫入如下內容
// webpack.config.js
var webpack = require("webpack");
var path = require("path");
module.exports = {
entry: './dev/entry.jsx', // 入口文件
devtool: 'source-map', // 調試時定位到編譯前的代碼位置，推薦安裝react插件
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js' // 打包輸出的文件
},
module: {
rules: [{
test: /\.jsx?$/, // test 去判斷是否為.js或.jsx,是的話就是進行es6和jsx的編譯
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
},
resolve: {
// 現在你import文件的時候可以直接使用import Func from './file'，不用再使用import Func from './file.js'
extensions: ['.js', '.jsx', '.json', '.coffee']
}
};
目錄結構：
app |__dev | |__components | |__entry.jsx |__dist | |__css | |__js | |__bundle.js | |__index.html |__node_modules |__package.json |__webpack.config.js
對於這份配置文件有如下說明
1，標紅的部分可自定義
2，react項目文件可以用js格式，也可以用jsx格式，但是輸出文件為在HTML文件中引用的文件，必須為js格式。
3，本配置入口文件在dev目錄下，輸出文件在dist目錄下，具體可自定義配置。
4，module.rules為2.x新增的接口，代替原先使用的module.loaders
5，去掉query會報錯，也可將其規則寫入package.json文件，具體寫法見參考鏈接
五，在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參數指定根html文件所在位置。
六，開發階段在終端使用 npm start 自動編譯代碼並刷新；使用 npm run build 編譯生產環境代碼。
注：webpack-dev-server自動編譯代碼和刷新浏覽器並不會將編譯後的文件寫入磁盤，而是保持在內存中，因此此時在html文件中引入的腳本文件src為"bundle.js"，沒有任何路徑，如果在webpack.config.js的ouput中指定了"publicPath"，情況又有所不同，詳見參考鏈接第三個。
附：webpack編譯過程中常用的參數，可在scripts編譯命令中分別配置
eslint支持：
npm i eslint babel-eslint eslint-plugin-react --save-dev
新建一個.eslintrc文件，寫入react支持基本參數
{
"plugins": ["react"],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parser": "babel-eslint"
}
推薦安裝編輯器對應的eslint插件，可以在界面實時顯示錯誤信息。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。