谈谈Es6+React以及webpack打包如何搭建框架
经过两天断断续续的折腾，我的博客引擎的框架总算初步完成，第一个里程碑要完成啦啦啦
吐槽时刻
- 真的好想哭，开始上手时，咦，react长啥样，怎么监听服务器来着，我该做什么，忘得一干二净，真的是还给老师了吗
- 无奈之下，我去翻出暑假做得那些项目，东拼西凑，大概拼出来一个，可是到处有问题，而且有些东西不太理解，不行，不能稀里糊涂就的开始
问题所在
- 以前总在别人的框架里边填东西，很多东西自己并没有亲自去做，看似简单，实则不然
- 学新东西时没有趁热打铁去做总结，记录，一段时间过去后，基本忘得差不多了
- 对于无法理解的东西，可以暂时不深究，但尽量将它记录下来，如何操作，久而久之，多用，自然会理解，否则，很麻烦，比如webpack。
谈谈正事
Es6+React以及webpack打包搭建框架的步骤及部分详解
- 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代码，从而在现有环境执行。
至此我们所需要的依赖都安装完毕啦
-------------------------------------分割线----------------------------------------------
代码部分
代码结构图：
代码结构
- 首先创建两个组件，即就是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": {
"blog": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
blog 中各个参数的含义：
- --webpack-dev-server 在 localhost:8080 建立一个 Web 服务器；
- --devtool eval 映射编译好的源码，用于调试；
- --progress 显示代码打包进度；
- --colors 表示在命令行中显示颜色；
- --content-base 来指定 server 启动后的内容目录。
执行 npm run blog 启动 server，此时打开 http://localhost:8080 ，即可看到效果。
第一个里程碑结束啦！！！成果在此欢迎吐槽
