React开发环境搭建（react,babel,webpack webpack-dev-server)

最终效果:
配置webpack 自动编译脚本， 内容更改后浏览器页面自动刷新，提高效率。 主要靠webpack 的watch 功能。
npm 全局安装的包： webpack webpack-cli webpack-dev-server.  
项目内2个文件 package.json. webpack.config.js 配置如下。截图不是最简单结构， 后面增加redux, react-redux 包加了点东西。 
需要建立这样的目录后， npm install 就会根据package.json安装项目需要的包。 而根据webpack.config.js 就会自动运行。 详细的东西不再介绍， 专题学习更加稳妥。 
目录结构：

 

//webpack.config.js 配置文件

const path = require('path');

module.exports = {
    entry: "./www/app/main.js",     //入口文件
    output: {                   //出口文件
        path: path.resolve(__dirname, "www/dist"),  //打包到哪个文件夹中
        filename: "bundle.js",                   //打包到哪个文件
        publicPath : "/xuni"
    },
    watch : true,
    mode: "development",
    module : {
        rules: [
            {
                test: /\.js$/,                      //以.js结尾的文件
                include: [
                    path.resolve(__dirname, "www/app")  //包括什么文件夹
                ],
                exclude: [
                    path.resolve(__dirname, "node_modules")   //不包括
                ],
                loader: "babel-loader",
                options: {
                    presets: ["env","react"]
                }
            }
        ]
    }
}
    1 	//package.json 文件。 
    2 	
    3 	{
    4 	  "name": "react-0327",
    5 	  "version": "1.0.0",
    6 	  "description": "",
    7 	  "main": "index.js",
    8 	  "scripts": {
    9 	    "dev": "webpack-dev-server --content-base ./www --port 8080"
   10 	  },
   11 	  "author": "",
   12 	  "license": "ISC",
   13 	  "devDependencies": {
   14 	    "babel-core": "^6.24.1",
   15 	    "babel-loader": "^7.1.4",
   16 	    "babel-preset-env": "^1.7.0",
   17 	    "babel-preset-react": "^6.24.1"
   18 	  },
   19 	  "dependencies": {
   20 	    "react": "^16.8.5",
   21 	    "react-dom": "^16.8.5"
   22 	  }
	}

需要注意的引入babel-loader 后。 相应高低版本问题， 出现问题， 根据提示即可解决。 譬如本例用到env, react 2个babel loader. 是比较新的版本， 如果用babel-present-es2015 则是低版本支持， 根据提示搜索即可解决问题。 


根据webpack的配置。 在index.html 引入js 文件方式： 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script src="xuni/bundle.js"></script>
</body>
</html>


入口Main.js 和组件App.js 分别为： 

//main.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./App.js";

ReactDOM.render(
    <App></App>
    ,
    document.getElementById("app")
);


//App.js
import React from "react";
export default class App extends React.Component{
    constructor(){
        super();
    }

    render(){
        
        return <div>
　　<h1>React 第一步 </h1>
</div> } }


参考： 
http://​​​​​​​https://www.valentinog.com/blog/react-webpack-babel/ 
https://www.cnblogs.com/chenziyu-blog/p/5675086.html
​​​​​​​
 

posted @ 2019-03-28 16:40  hijushen  阅读(230)  评论(0)  编辑  收藏  举报