使用 history 控制路由跳转

记得 QQ 空间说说的名字以前叫 心情 ~

1. npm init

2. npm i -D webpack@3

3. have a try

   package.json 中添加 script

   1 2 3

   "scripts": { "build": "webpack" }

Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

1
2
3
4
5
6
7
8

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 处理对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开发服务器配置
    mode: 'development'      // 模式配置 -- 在webpack@4以上才有
}

webpack TM 到底是什么和为什么

历史

因为早期浏览器的标准的不统一导致 web 技术的历史包袱比较重，旧的浏览器无法支持新的标准，但是又有旧的浏览器的用户群体，同时也有需要新方法的用户群体，新需求和旧标准之间的矛盾一直存在，而且愈演愈烈。整个前端生态就好像一个巨人在一个鸡窝里头去跳芭蕾舞，又要跳的优雅，又要跳的小心，还不能踩死鸡娃，就是这种感觉。那咋搞？webpack lei了。

坑坑 - 模块化

要理解 webpack 是个什么东西，以及它解决了什么问题，首先得了解前端的一个最大的坑，就是浏览器在解析js的时候，它有个盲点，无法像其他语言一样做到 js 文件的模块化。

比如说：一个文件想要对另一个文件暴露出去一个变量，你只能把它定义在全局作用域下。在 script src 中引入 js 文件，但是一旦文件数量一多，可能变量就会发生冲突，覆盖。

图解ES6中的React生命周期

一个React组件的生命周期分为三个部分：初始化阶段、运行中阶段、销毁阶段。

初始化阶段:
static defaultProps
constructor
componentWillMount
render
componentDidMount

运行中阶段:
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render
componentDidUpdate

销毁阶段:
componentWillUnmount

createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。
createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；
而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。

React.createClass和extends Component的区别主要在于：

1. 语法区别
2. propType 和 getDefaultProps
3. 状态的区别
4. this区别
5. Mixins

At its heart, React Router is a component.

underscore tips

1. _.union(*arrays)
返回传入的 arrays(数组)并集：按顺序返回，返回数组的元素是唯一的，可以传入一个或多个 arrays (数组)。
_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]); => [1, 2, 3, 101, 10]

2. _.difference(array, *others)
返回的值来自array参数数组，并且不存在于other 数组。
_.difference([1, 2, 3, 4, 5], [5, 2, 10]); => [1, 3, 4]

1. webpack plugins

• webpack-parallel-uglify-plugin
  可以并行运行 UglifyJS 插件，更加充分而合理的使用 CPU 资源，这可以大大减少的构建时间

  1 2 3 4 5 6 7 8 9 10 11 12

  var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); new ParallelUglifyPlugin({ cacheDir: '.cache/', uglifyJS:{ output: { comments: false }, compress: { warnings: false } } })