webpack 2.x配置reactjs基本開發環境詳解

本文介紹了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 ，如果沒有特殊要求，可一直按回車鍵到最后一步。

三，在終端內執行如下命令下載需要的所有依賴和工具。

四，配置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編譯命令中分別配置

• webpack 開發環境下編譯
• webpack -p 產品編譯及壓縮
• webpack --watch 開發環境下持續的監聽文件變動來進行編譯(非常快!)
• webpack -d 引入 source maps

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插件，可以在界面實時顯示錯誤信息。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。