react webpack 配置的详细过程-原创手记-慕课网

安装全局react

A.sudo npm install -g react

1.初始化项目架构 npm init => 生成package.json文件

2.本地生成独立 react-webpack 环境 => sudo npm install webpack --save-dev

3. 本地存储文件编译出来的数据 =>创建文件夹app,build=> 生成build文件夹>bundle.js 指向浏览器编译的文件

还没编译的文件目录       要编译的文件目录
webpack app/app.js build/bundle.js

4.编译出来的文件引入到webpacak=>创建webpack.config.js => 配置编译出来的文件

moudule.exports={
    entry:__dirname+'/app/app.js',
    output:{
        path:__dirname+'/build',
        filename:'bundle.js'
    }
}

5.转换浏览器会编译出来命令，我上面webpack中配置了浏览器不会直接编译文件 => webpack

B.创建webpack服务器

1.安装全局的webpack服务器 sudo npm install -g webpack-dev-server

2.本地安装webpack服务器=>sudo npm install webpack-dev-server@2.4.1

3.启动服务器 webpack-dev-server

4.改变服务器启动的命令添加 "build":"webpack-dev-server"

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack-dev-server"
"build":"webpack-dev-server content-base build --inline --hot"
},

5.运行命令 npm run build

C. 创建完整的REST API =>npm install -g json-server http://www.jianshu.com/p/81373d90f9f0

D loaders webpack 强大一个功能

ES5 变成ES6 , jsx 变成 ES5 , less 变成 css, sass变成 css , 全部靠loaders

0. 安装babel => 安装排名必须第一

"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",

1. json数据的格式转化成js对象 => sudo npm install --save-dev json-loader@0.5.4

2. 安装react =>npm install --save-dev react react-dom

sudo npm install --save-dev react@15.4.2
sudo npm install --save-dev react-dom@15.4.2

3.安装style-loader =>sudo npm install --save-dev style-loader@0.13.2