首页 > 代码库 > webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建

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="http://www.mamicode.com/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="http://www.mamicode.com/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 查看效果

 



webpack+babel+ES6+react环境搭建