webpack学习（五）—webpack+react+es6（第1篇）

  • Z时代
  • 2024-01-10
  • 分类：综合

react

如果你看过webpack学习系列的前一个文章，接下来做的东西会比较简单 ：webpack学习（四）— webpack-dev-server

react发展的很快，现在大部分开发react相关的项目，都会用到这个组合：webpack+react+es6

还是以一个项目举例，项目中的package.json是生成的，"devDependencies"都是自己手动安装加入，如果拷贝网上的资料，已存在package.json文件且内容完整，可以npm install直接安装所需要的插件。

第一次接触，为了一探react的具体开发流程，还是自己一个个安装比较好。

如果你在看本文，请按照以下步骤操作即可：

项目目录：

package.json

{
  "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.html

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

　　

webpack.config.js

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.js

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新加入的，用于引入模块。 

以上是 webpack学习（五）—webpack+react+es6（第1篇） 的全部内容， 来源链接： utcz.com/z/381865.html

回到顶部