react+webpack+ES6打包搭建框架的步骤及部分详解
-
npm init
- 此条命令是创建一个npm项目
- NPM 全称 node package manager, 是 nodejs 的包管理工具,使用它让我们可以更方便的使用别人的代码,以及向别人分享我们的代码。
- 执行后,npm会引导输入一些基本信息,可以默认按回车键,然后会生成一个package.json文件,包含基本信息,后续的依赖也会保存到它里边。
-
npm install react react-dom --save
- 安装react和react-dom依赖
- npm install webpack webpack-dev-server --save-dev
- 安装webpack和webpack-dev-server依赖
- webpack 是一个模块打包工具
- 上边所说的模块在这里指js&css&image,有了webpack就可以很方便的打包这三种资源。
- webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。
- npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
- 安装babel以及相关的插件
- Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
至此我们所需要的依赖都安装完毕啦
-------------------------------------分割线----------------------------------------------
代码部分
代码结构图:
![](http://upload-images.jianshu.io/upload_images/3114127-ed52f3abc4a0065a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
代码结构
- 首先创建两个组件,即就是hello和world文件夹中的index.js,分别只用来显示一个“hello”和“world”就好。
- 在build文件夹下创建一个入口页面,index.html,去使用上边的两个组件。
- webpack配置
- webpack打包时需要一个入口文件,需要将react组件引到这个入口文件,就是component中的index.js
index.js:import Hello from './hello/index.js'; import World from './world/index.js';
- webpack.config.js的配置
-
var path = require('path'); var webpack = require('webpack'); var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(__dirname, './components/index.js'); var BUILD_PATH = path.resolve(__dirname, './build'); module.exports = { entry: APP_PATH, output: { path: BUILD_PATH, filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, loaders: ['babel-loader?presets[]=es2015,presets[]=react'] }] } }
- 配置完成后需要最后执行webpack.config.js中的构建任务,在package.json中配置就可以完成
"scripts": { "build": "webpack" }
- 最后将打包好的文件bundle.js引入到入口页面index.html中,此时去打开index.html就可以看到效果啦
那如何启动一个静态资源服务器来看到页面呢??? - 此时可以直接在package.json中做修改,用到的是前边安装过的webpack-dev-server
"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" }
- --webpack-dev-server 在 localhost:8080 建立一个 Web 服务器;
- --devtool eval 映射编译好的源码,用于调试;
- --progress 显示代码打包进度;
- --colors 表示在命令行中显示颜色;
- --content-base 来指定 server 启动后的内容目录。
- webpack打包时需要一个入口文件,需要将react组件引到这个入口文件,就是component中的index.js
执行 npm run dev 启动 server,此时打开 http://localhost:8080 ,即可看到效果。
最后给一个demo链接 ;实例