react-todo实战(一)之webpack

发表于   |   分类于   |     |   阅读次数

看过一遍webpack/es6/react的基础之后，感觉还算不上真正入门react的实战开发，于是乎想边学边搞一个小项目、把这三webpack/es6/react结合起来用一遍，从实际小项目中反过来学习基础要点。
(react的基础学习在 前面的学习。)

全部亲手一行行敲完后，终于有了这个稍微成型的入门小实例：
完整代码github：react-todo
演示链接demo：react-todo
实践中收货良多，过后便稍微总结一下系列的笔记。

react-todo 目录

webpack.config.js最终版

webpack的配置初接触还是坑满满的，先上一个最终版的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var path = require('path');
module.exports = {
    entry: path.resolve(__dirname,'./src/Todo.js'),
    output: {
        path: path.resolve(__dirname,'build'),
        filename: 'bundle.js'
    },
    devtool: 'eval-source-map',
    module: {
        loaders: [
            {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel',query: {presets: ['es2015','react']}},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
            {test: /\.scss$/, loader: 'style!css!sass'}
        ]
    }
}

接下来再拆分说明一下

模块引入

三种方式：

1
2
3
4
5
6
7
8
//es6
import todoDb from './todoDb.js';
//CommonJS
var todoDb = require('./todoDb.js');
//AMD
define(['./todoDb.js'], function (todoDb) {
    //
});

注意：相对路径是相对当前目录，绝对路径是相对入口文件(这里是Todo.js)。

配置简介

exports的两种写法

1
2
3
4
5
6
7
8
9
10
//1
module.exports ={
    //entry:......
}
//2
var config = {
    //entry:......
}
module.exports = config;

配置参数
entry：打包的入口文件，每有一个键值对，就有一个入口文件；
output：打包结果，path定义输出文件夹，filename定义打包结果文件的名称；
devtool: 调试错误定位，一般学习dev下设置为’eval-source-map’；
module：定义对模块的处理，对正则匹配的模块采用相应引入的loader进行处理。

loaders
webpack本身只能处理JS模块，要处理其它类型文件（scss/css/图片等）就需要引入相应的loader进行转换。
loader的一般参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//1
test: /\.jsx?$/,    //正则匹配要处理的文件
loader: 'babel',    //要引用的loader
exclude: /node_modules/,    //要忽略的文件
include: [path.resolve(__dirname,'src')],   //要处理的文件
query: {                            //query:要传给loader的属性
    presets: ['es2015','react']     //使用安装的es2015、react模块
}
//2
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192'     //图片小于8192则转换为64位base的data
//3
test: /\.scss$/,
loader: 'style!css!sass'        //同时引用多个loader,用！隔开

自动刷新

方式一iframe
编辑package.json文件的script，设置webpack-dev-server指向的目录：

1
2
3
4
"scripts": {
  "dev": "webpack-dev-server --content-base ./build",
  "build": "webpack --progress --colors"
}

然后直接访问localhost:8080/webpack-dev-server/index.html即可。

方式二inline
新增一个 --inline:

1
2
3
4
"scripts": {
  "dev": "webpack-dev-server --inline --content-base ./build",
  "build": "webpack --progress --colors"
}

然后访问localhost:8080/index.html即可。

热加载

新增一个 --hot:

1
"dev": "webpack-dev-server --inline --hot --content-base ./build",

坑：我当初用的是webstorm/phpstorm IDE，这个东西强大得太智能了，当修改了文件后按ctrl+s保存后，hot热加载并没有生效啊！
当时折腾了好久才猛然发现，是IDE的自动保存缓存之类搞的鬼；
解决：设置webstorm/phpstorm：在 system settings中 取消 use “safe write”….，并设置修改过的文件用 * 标记。

（话说有个React-transform热替换更好，往后再试试）

遇到的坑

node_modules惹的祸
webstorm/phpstorm完全被卡住，最后直接挂掉；github客户端也同步不了……
原因都是因为node_modules！
解决：
webstorm/phpstorm：先建好node_modules文件夹；然后设置将其忽略、不检索该目录的依赖；再npm install安装loaders。
github客户端：在 .gitignore文件下加入 node_modules/，将其忽略不必提交到git。

loaders安装
在公司电脑安装好全部loaders,然后拿着package.json回到宿舍再 npm install 、各种报错；什么鬼版本号、缺少模块，全部卸载重新安装、补充安装、增加设置……
反正坑啊，踩一坑就谷歌一下，步履维艰前行，最后瞎折腾着就解决了…..