React.js学习笔记(1) - react开发环境搭建 + （webpack）+ (webpack-dev-server)

(1) webpack相关

webpack介绍

webpack介绍

webpack配置说明

(2) webpack，webpack-dev-server的安装

• webpack-dev-server是一个小型的Node.js Express服务器,
  它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时

(1) 开始前还是万万不能缺少的安装：全局安装webpack

npm install webpack -g

(2) 安装完接着进入项目根目录，新建一个package.json依赖管理文件

npm init    //填写相关内容

(3) 在项目根目录下安装我们的webpack

npm install webpack --save-dev   
------------------------
npm install webpak-dev-server --save-dev

//--save-dev 的意思是将这个安装过程记录到我们的package.json依赖管理文件里

(4) 完后新建一个名为webpack.config.js的文件

• webpack的配置文件，就是一个配置项，告诉 webpack 它需要做什么。

(5) 在webpack.config.js文件中引入webpack和webpack-dev-server

var webpack = require('webpack');

详细代码如下：

webpack.config.js文件如下：

----------------------------------

var webpack = require('webpack');

var path = require('path');   //path是node命令

module.exports = {
    entry: "./app/index.js",  //入口文件
    output: {   //打包完成后的输出文件
        path: path.resolve(__dirname, './dist'),  //要使用相对路径，需要用引用path.resove,记得要先require
        filename: 'bundle.js'
    }
}

• 在入口html中引入打包好的bundle.js

截图

• 常用的loader
  如：Babel-loader , css-loader , less-loader
  http://webpack.github.io/docs/using-loaders.html
  
  

  常用的loader

---

番外篇

--save-dev和--save的区别

• --save-dev：开发的时候用，正式上线的时候不用。（dev是development开发意思）
• --sava：开发时候用，上线的时候也要用。

例如：开发时的依赖和（开发上线都用的依赖）
"devDependencies": {
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },   //开发时候的依赖
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }   //开发和上线都会使用的依赖

---

http://www.jianshu.com/p/237260271dc8

---

总结

webpack打包生成bundle.js后在index.html中引用，输出hellow word的完整例子

• (1) webpack.config.js 即webpack的配置文件

var path = require('path'); //node自带的模块

var webpack = require('webpack'); //引入webpack

module.exports = {
    entry: './app/index', //表示入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //打包到哪个文件夹
        filename: 'bundle.js'  //打包完成后的文件名
    }
}  //这里还没用到module的loaders

• (2) 现在在dist文件夹中已经有了打包好的bundle.js文件，现在把他引入index.html中

index.html
-------------------------



    
    


    

        
helow world
    
    

• (3)例子的完整目录结构

完整的目录结构

(2) webpack-dev-server小型的Node Express服务器

• webpack-dev-server是一个小型的Node.js Express服务器,
  它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时

(一) 总结来说webpack-dev-server的作用主要有liang'g'ge：

(1) 搭建本地服务器
(2) 自动刷新