webpack+babel+ES6+react环境搭建

步骤：

1 创建项目结构

注意: 先创建一个项目目录 react 这个名字自定义，然后进入到这个目录下面

mkdir  app    //创建app目录 用来存放项目源文件

mkdir  dist   // 创建dist目录  用来存放打包好的文件

touch  .gitignore  //创建.gitignore  用来添加git 忽略的文件

touch   webpack.config.js   //创建webpack的配置文件

cd  app    //进入到app目录

touch  index.js  //在app目录中创建 index文件  入口文件

mkdir  component  //创建componet目录 用来装组件

2 初始化项目

npm init -y

做完上面两步，得到项目目录为：

3 安装webpack

npm install webpack --save

注意：安装完成以后，项目目录下会生成一个node_modules的文件夹用来存放npm包

4 打开webpack.config.js 文件并添加配置项目

module.exports = {

　　context:__dirname+"/app", //源文件目录

　　entry:{

　　　　app:"./index.js" //在源文件目录下去找index.js 文件作为打包的入口文件

　　},

　　output:{

　　　　path:__dirname+"/dist", //生成的文件存放目录

　　　　filename:"[name].bundle.js" //生成的文件 name 表示entry下面的app

　　}

}

5 让npm 可以运行 webpack --在package.json 文件中添加一条命令

{

  "name": "react",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev":"./node_modules/.bin/webpack"   //这条命令是新增加的

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "babel": "^6.23.0",

    "babel-core": "^6.23.1",

    "babel-loader": "^6.3.2",

    "babel-preset-es2015": "^6.22.0",

    "webpack": "^2.2.1"

  }

}

注意：添加完成后就可以通过 npm run dev 来打包编译 js文件

6 在dist目录下面新建index.html 文件，并且引入打包好的js文件

index.html 文件内容：

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<metacharset="UTF-8">

　　<title>首页</title>

　　</head>

　　<body>

　　</body>

　　<scriptsrc="app.bundle.js"></script>

</html>

index.js文件内容：

doucment.write("hello world!!!!")

执行npm run dev 命令后会在dist目录下面生成一个 app.bundle.js 的文件运行index.html 文件查看效果

6 通过babel来使用es6

安装相关loader

npm install babel-loader babel-core babel-preset-es2015 --save

修改webpack.config.js 配置文件，添加规则

module.exports = {

    context:__dirname+"/app",

    entry:{

        app:"./index.js"

    },

    output:{

        path:__dirname+"/dist",

        filename:"[name].bundle.js"

    },

    module:{

        rules:[

            {

                test:/\.jsx?$/,

                exclude: /node_modules/,

                use: [{

                    loader: "babel-loader",

                    options: { presets: ["react","es2015"] }

                }],

            },

        ]

    }

}

7 添加react支持

npm install react react-dom babel-preset-react --save

注意：这里有坑：安装的时候报错，最大的问题是因为我们项目名称叫做 react 在package.json文件中有个name属性值为react 只需要把这个react值改成其他的就可以安装上了

修改 app下面 index.js 文件

import React from 'react';

import ReactDOM from 'react-dom';

class IndexComponent extends React.Component{

    render(){

        return <h1>hello world!!!</h1>

    }

}

var oBox = document.getElementById("box");

ReactDOM.render(<IndexComponent/>,oBox)

npm run dev 然后运行 index.html 文件查看效果

修改dist下面 index.html文件

<!DOCTYPE html>

<htmllang="en">

<head>

    <metacharset="UTF-8">

<title>首页</title>

</head>

<body>

    <divid="box"></div>

</body>

<scriptsrc="app.bundle.js"></script>

</html>

8 添加样式支持

安装css-loader 和 style-loader

npm install css-loader style-loader --save

修改配置webpack.config.js 配置文件

module.exports = {

    context:__dirname+"/app",

    entry:{

        app:"./index.js"

    },

    output:{

        path:__dirname+"/dist",

        filename:"[name].bundle.js"

    },

    module:{

        rules:[

            {

                test:/\.jsx?$/,

                exclude: /node_modules/,

                use: [{

                    loader: "babel-loader",

                    options: { presets: ["react","es2015"] }

                }],

            },

            {   //这里的内容是新增加的对样式的支持

                test: /\.css$/,

                use: ["style-loader", "css-loader"],

            },

        ]

    }

}

修改 index.js 文件

import React from 'react';

import ReactDOM from 'react-dom';

import styles from './css/index.css'; //这里内容属于新增加的

class IndexComponent extends React.Component{

    render(){

        return <h1>hello world!!!</h1>

    }

}

var oBox = document.getElementById("box")

ReactDOM.render(<IndexComponent/>,oBox)

在app目录下新建css目录，在css目录下新建 index.css 文件

h1{

color: green;

}

npm run dev 编译然后运行 dist目录下index.html 文件查看效果

9 添加web服务器支持

安装 webpack-dev-server

npm install webpack-dev-server --save

修改package.json文件

把：

"dev": "./node_modules/.bin/webpack"

修改为：

"dev": "./node_modules/.bin/webpack-dev-server --content-base dist"

npm run dev 然后在浏览器输入 http://loaclhost:8080 查看效果