webpack學習（五）—webpack+react+es6（第1篇）

時間 2019-11-13

標籤 webpack 學習 webpack+react+es6 react 欄目 React 简体版

原文原文鏈接

若是你看過webpack學習系列的前一個文章，接下來作的東西會比較簡單：webpack學習（四）— webpack-dev-serverjavascript

react發展的很快，如今大部分開發react相關的項目，都會用到這個組合：webpack+react+es6css

仍是以一個項目舉例，項目中的package.json是生成的，"devDependencies"都是本身手動安裝加入，若是拷貝網上的資料，已存在package.json文件且內容完整，能夠npm install直接安裝所須要的插件。html

第一次接觸，爲了一探react的具體開發流程，仍是本身一個個安裝比較好。java

若是你在看本文，請按照如下步驟操做便可：node

項目目錄：react

package.jsonwebpack

{
  "name": "pro4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --hot --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.0",
    "react": "^15.4.0",
    "react-dom": "^15.4.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

index.htmles6

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="content"></div>
	<script src="build/bundle.js"></script>
</body>
</html>

webpack.config.jsweb

var path = require("path");
module.exports = {
  entry:[
    './src/js/app.js'
  ],
  output: {
    path: path.resolve('./', "dist"),
    publicPath: "build",
    filename: "bundle.js"
  },
  module: {
      loaders: [
          {test: /\.js?$/, exclude: /node_modules/,  loaders: [ 'babel?presets[]=react,presets[]=es2015' ] },
          { test: /\.css$/, loader: 'style!css'}
      ]
    },
  resolve:{
        extensions:['','.js','.json']
    },
};

src/js/app.jsnpm

import React from 'react';
import ReactDOM from 'react-dom';
import Helloworld from './helloworld';


// ReactDOM.render
// (<Helloword/>,document.getElementById('content');
// );
ReactDOM.render
(
	<Helloworld/>,
	document.getElementById('content')
);

src/js/helloword.js

import React from 'react';
import ReactDOM from 'react-dom';

class Helloworld extends React.Component{

	constructor(props) {
		super(props);
	}

	render(){
		return(<h1>Hello World！！！！！！</h1>)
	}
}

module.exports = Helloworld

至此，項目結構，文件都已完成

安裝: npm init

啓動：npm run dev

項目地址：http://localhost:8080/index.html

　　說明：

　　1）本文例子中package.json包含的 "devDependencies"項，是webpack+react+es6開發的最少的安裝。本例熱加載，修改任何一個src/js下的js文件，保存，瀏覽器自動更新。

　　2）本文例子並無安裝react-hot-loader，緣由是直接安裝，目前版本一到3.0以上，並不支持在webpack.config.js中這麼書寫：

 {test: /\.js?$/, exclude: /node_modules/, loaders: ['react-hot','babel-loader?presets[]=react,presets[]=es2015'] },

　　若是寫了，webpack-dev-server會報錯：

Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately

　　可是，用低版本的react-hot-loader不會報錯。

　　並且你會發現，如今不用react-hot-loader，也能夠熱加載。

　　3）js的加載器：

{test: /\.js?$/, exclude: /node_modules/,  loaders: [ 'babel?presets[]=react,presets[]=es2015' ] },

　　這裏很重要，先用babel-loader將es6(es2015),react的語法（jsx）轉換爲目前瀏覽器廣泛支持的語法，即es5。

　　若是這裏配置出錯，或者沒有安裝除了babel外的2個loader，會報錯

Module build failed: SyntaxError: Unexpected token

　　由於你在return裏寫的HTML標籤不識別（不是字符串）。　

　　4)若是要兼容老版本瀏覽器，支持es3語法。還須要用es3ify-loader。本例沒有用。

　　5）若是你想輸出文件，執行webpack -p便可生成dist目錄下的bundle.js文件。再建個html文件，引入bundle.js。便可看到helloworld！！！！。這就是咱們發佈的js，html。

　　6）本例沒有對html文件進行處理。上一步會顯得彆扭。這個後續慢慢探索吧。。。

　　7）ES6的最直接體現是咱們建立組件的時候，用class而不是React.creatClass這個方法了。此外，import也是ES6新加入的，用於引入模塊。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。