react-redux-webpack-express开发环境搭建

项目结构

build
|-- webpack.config.js               # 公共配置
|-- webpack.dev.js                  # 开发配置
|-- webpack.release.js              # 发布配置
docs                                # 项目文档
node_modules        
server                          #expres后台代码                
src                                 # 项目源码
|-- conf                            # 配置文件
|-- pages                           # 页面目录
|   |-- page1                       
|   |   |-- index.js                # 页面逻辑
|   |   |-- index.scss              # 页面样式
|   |   |-- img                     # 页面图片
|   |   |   |-- xx.png          
|   |   |-- __tests__               # 测试文件
|   |   |   |-- xx.js
|   |-- app.html                    # 入口页
|   |-- app.js                      # 入口JS
|-- components                      # 组件目录
|   |-- loading
|   |   |-- index.js
|   |   |-- index.scss
|   |   |-- __tests__               
|   |   |   |-- xx.js
|-- js
|   |-- actions
|   |   |-- index.js
|   |   |-- __tests__               
|   |   |   |-- xx.js
|   |-- reducers 
|   |   |-- index.js
|   |   |-- __tests__               
|   |   |   |-- xx.js
|   |-- xx.js                 
|-- css                             # 公共CSS目录
|   |-- common.scss
|-- img                             # 公共图片目录
|   |-- xx.png
tests                               # 其他测试文件
package.json                        
READNE.md        

功能

1.编译 jsx、es6、scss 等资源
2.自动引入静态资源到相应 html 页面
3.实时编译和刷新浏览器
4.按指定模块化规范自动包装模块
5.自动给 css 添加浏览器内核前缀
6.按需打包合并 js、css
7.压缩 js、css、html
8.图片路径处理、压缩、CssSprite
9.对文件使用 hash 命名，做强缓存
10.语法检查
11.全局替换指定字符串
12.本地接口模拟服务
13.发布到远端机
14.node.js后台

创建项目

1. 根据前面的项目结构规划创建项目骨架

$ make dir project
$ cd project
$ mkdir build docs src mock tests
$ touch build/webpack.config.js build/webpack.dev.js build/webpack.release.js
// 创建 package.json
$ npm init
$ ...

2、安装最基本的几个 npm 包

$ npm i webpack webpack-dev-server --save-dev
$ npm i react react-dom react-router redux react-redux redux-thunk --save

package.json

{
  "name": "react-redux-webpack",
  "version": "1.0.0",
  "description": "使用 webpact + react + redux + es6 的组件化前端样板项目。",
  "directories": {
    "doc": "docs",
    "test": "tests"
  },
  "scripts": {
    "lint": "eslint src",
    "test": "make test",
    "main": "index.js",
    "start": "npm run dev:local",
    "dev-start": "node dist/app.js",
    "build": "webpack --config ./webpack.deployment.config.js --progress --colors",
    "dev:local": "cross-env NODE_ENV=development node build/webpack.dev.js --hot",
    "dev:test": "cross-env NODE_ENV=development node build/webpack.dev.js --hot --deploy",
    "release": "npm run deploy:online",
    "deploy:test": "cross-env NODE_ENV=production node build/webpack.release.js --watch --uglify --deploy=test",
    "deploy:online": "cross-env NODE_ENV=production node build/webpack.release.js --uglify --deploy=online"
  },
  "keywords": [
    "webpack",
    "react",
    "es6",
    "babel",
    "redux",
    "boilerplate"
  ],
  "author": "xiaoyann",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "cross-env": "^2.0.0",
    "css-loader": "^0.23.1",
    "eslint": "^3.1.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.11.0",
    "eslint-plugin-jsx-a11y": "^2.0.1",
    "eslint-plugin-react": "^5.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "ftp": "^0.3.10",
    "glob": "^7.0.5",
    "html-webpack-plugin": "^2.22.0",
    "image-webpack-loader": "^2.0.0",
    "md5": "^2.1.0",
    "node-sass": "^4.5.3",
    "postcss-loader": "^0.9.1",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-md5-hash": "0.0.5"
  },
  "dependencies": {
    "d3": "^4.10.0",
    "echarts": "^3.6.2",
    "node-sass": "^4.5.3",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.5.2",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0"
  }
}

3、编写示例代码，最终代码直接查看 demo

4、根据 webpack 文档编写最基本的 webpack 配置，直接使用 NODE API 的方式

/* webpack.config.js */

var webpack = require('webpack');

// 辅助函数
var utils = require('./utils');
var fullPath  = utils.fullPath;
var pickFiles = utils.pickFiles;

// 项目根路径
var ROOT_PATH = fullPath('../');
// 项目源码路径
var SRC_PATH = ROOT_PATH + '/src';
// 产出路径
var DIST_PATH = ROOT_PATH + '/dist';

// 是否是开发环境
var __DEV__ = process.env.NODE_ENV !== 'production';

// conf
var alias = pickFiles({
  id: /(conf\/[^\/]+).js$/,
  pattern: SRC_PATH + '/conf/*.js'
});

// components
alias = Object.assign(alias, pickFiles({
  id: /(components\/[^\/]+)/,
  pattern: SRC_PATH + '/components/*/index.js'
}));

// reducers
alias = Object.assign(alias, pickFiles({
  id: /(reducers\/[^\/]+).js/,
  pattern: SRC_PATH + '/js/reducers/*'
}));

// actions
alias = Object.assign(alias, pickFiles({
  id: /(actions\/[^\/]+).js/,
  pattern: SRC_PATH + '/js/actions/*'
}));


var config = {
  context: SRC_PATH,
  entry: {
    app: ['./pages/app.js']
  },
  output: {
    path: DIST_PATH,
    filename: 'js/bundle.js'
  },
  module: {},
  resolve: {
    alias: alias
  },
  plugins: [
    new webpack.DefinePlugin({
      // http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
};

module.exports = config;

/* webpack.dev.js */

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var utils = require('./utils');

var PORT = 8080;
var HOST = utils.getIP();
var args = process.argv;
var hot = args.indexOf('--hot') > -1;
var deploy = args.indexOf('--deploy') > -1;

// 本地环境静态资源路径
var localPublicPath = 'http://' + HOST + ':' + PORT + '/';

config.output.publicPath = localPublicPath; 
config.entry.app.unshift('webpack-dev-server/client?' + localPublicPath);

new WebpackDevServer(webpack(config), {
  hot: hot,
  inline: true,
  compress: true,
  stats: {
    chunks: false,
    children: false,
    colors: true
  },
  // Set this as true if you want to access dev server from arbitrary url.
  // This is handy if you are using a html5 router.
  historyApiFallback: true,
}).listen(PORT, HOST, function() {
  console.log(localPublicPath);
});

上面的配置写好后就可以开始构建了

$ node build/webpack.dev.js

因为项目中使用了 jsx、es6、scss，所以还要添加相应的 loader，否则会报如下类似错误：

ERROR in ./src/pages/app.js
Module parse failed: /Users/xiaoyan/working/webpack-react-redux-es6-boilerplate/src/pages/app.js Unexpected token (18:6)
You may need an appropriate loader to handle this file type.

编译 jsx、es6、scss 等资源

使用 bael 和 babel-loader 编译 jsx、es6
安装插件: babel-preset-es2015 用于解析 es6
安装插件：babel-preset-react 用于解析 jsx

// 首先需要安装 babel 
$ npm i babel-core --save-dev

// 安装插件 
$ npm i babel-preset-es2015 babel-preset-react --save-dev

// 安装 loader
$ npm i babel-loader --save-dev

在项目根目录创建 .babelrc 文件:

{
  "presets": ["es2015", "react"]
}

在 webpack.config.js 里添加：

// 使用缓存
var CACHE_PATH = ROOT_PATH + '/cache';
// loaders
config.module.loaders = [];
// 使用 babel 编译 jsx、es6
config.module.loaders.push({
  test: /\.js$/,
  exclude: /node_modules/,
  include: SRC_PATH,
  // 这里使用 loaders ，因为后面还需要添加 loader
  loaders: ['babel?cacheDirectory=' + CACHE_PATH]
});
接下来使用 sass-loader 编译 sass:

$ npm i sass-loader node-sass css-loader style-loader --save-dev
css-loader 用于将 css 当做模块一样来 import
style-loader 用于自动将 css 添加到页面
在 webpack.config.js 里添加：

// 编译 sass
config.module.loaders.push({
  test: /\.(scss|css)$/,
  loaders: ['style', 'css', 'sass']
});

自动引入静态资源到相应 html 页面

• 使用 html-webpack-plugin

$ npm i html-webpack-plugin --save-dev

在 webpack.config.js 里添加：

// html 页面
var HtmlwebpackPlugin = require('html-webpack-plugin');
config.plugins.push(
  new HtmlwebpackPlugin({
    filename: 'index.html',
    chunks: ['app'],
    template: SRC_PATH + '/pages/app.html'
  })
);

至此，整个项目就可以正常跑起来了

$ node build/webpack.dev.js

实时编译和刷新浏览器

完成前面的配置后，项目就已经可以实时编译和自动刷新浏览器了。接下来就配置下热更新，使用 react-hot-loader：

$ npm i react-hot-loader --save-dev

因为热更新只需要在开发时使用，所以在 webpack.dev.config 里添加如下代码：

// 开启热替换相关设置
if (hot === true) {
  config.entry.app.unshift('webpack/hot/only-dev-server');
  // 注意这里 loaders[0] 是处理 .js 文件的 loader
  config.module.loaders[0].loaders.unshift('react-hot');
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
}

执行下面的命令，并尝试更改 js、css：

$ node build/webpack.dev.js --hot

按指定模块化规范自动包装模块

webpack 支持 CommonJS、AMD 规范，具体如何使用直接查看文档

自动给 css 添加浏览器内核前缀

使用 postcss-loader

npm i postcss-loader precss autoprefixer --save-dev

在 webpack.config.js 里添加：

// 编译 sass
config.module.loaders.push({
  test: /\.(scss|css)$/,
  loaders: ['style', 'css', 'sass', 'postcss']
});

// css autoprefix
var precss = require('precss');
var autoprefixer = require('autoprefixer');
config.postcss = function() {
  return [precss, autoprefixer];
}

打包合并 js、css

webpack 默认将所有模块都打包成一个 bundle，并提供了 Code Splitting 功能便于我们按需拆分。在这个例子里我们把框架和库都拆分出来：

在 webpack.config.js 添加：

config.entry.lib = [
  'react', 'react-dom', 'react-router',
  'redux', 'react-redux', 'redux-thunk'
]

config.output.filename = 'js/[name].js';

config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin('lib', 'js/lib.js')
);

// 别忘了将 lib 添加到 html 页面
// chunks: ['app', 'lib']

如何拆分 CSS：separate css bundle

压缩 js、css、html、png 图片

压缩资源最好只在生产环境时使用

// 压缩 js、css
config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
);

// 压缩 html
// html 页面
var HtmlwebpackPlugin = require('html-webpack-plugin');
config.plugins.push(
  new HtmlwebpackPlugin({
    filename: 'index.html',
    chunks: ['app', 'lib'],
    template: SRC_PATH + '/pages/app.html',
    minify: {
      collapseWhitespace: true,
      collapseInlineTagWhitespace: true,
      removeRedundantAttributes: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      removeComments: true
    }
  })
);

图片路径处理、压缩、CssSprite

• 压缩图片使用 image-webpack-loader
• 图片路径处理使用 url-loader

$ npm i url-loader image-webpack-loader --save-dev

在 webpack.config.js 里添加：

// 图片路径处理，压缩
config.module.loaders.push({
  test: /\.(?:jpg|gif|png|svg)$/,
  loaders: [
    'url?limit=8000&name=img/[hash].[ext]',
    'image-webpack'
  ]
});

雪碧图处理：webpack_auto_sprites

对文件使用 hash 命名，做强缓存

根据 docs，在产出文件命名中加上 [hash]

config.output.filename = 'js/[name].[hash].js';

本地接口模拟服务

// 直接使用 epxress 创建一个本地服务

$ npm install epxress --save-dev
$ mkdir mock && cd mock
$ touch app.js
var express = require('express');
var app = express();

// 设置跨域访问，方便开发

app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

// 具体接口设置

app.get('/api/test', function(req, res) {
    res.send({ code: 200, data: 'your data' });
});

var server = app.listen(3000, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Mock server listening at http://%s:%s', host, port);
});

// 启动服务，如果用 PM2 管理会更方便，增加接口不用自己手动重启服务
$ node app.js &

发布到远端机

写一个 deploy 插件，使用 ftp 上传文件

$ npm i ftp --save-dev
$ touch build/deploy.plugin.js

// build/deploy.plugin.js

var Client = require('ftp');
var client = new Client();

// 待上传的文件
var __assets__ = [];
// 是否已连接
var __connected__ = false;

var __conf__ = null;

function uploadFile(startTime) {
  var file = __assets__.shift();
  // 没有文件就关闭连接
  if (!file) return client.end();
  // 开始上传
  client.put(file.source, file.remotePath, function(err) {
    // 本次上传耗时
    var timming = Date.now() - startTime;
    if (err) {
      console.log('error ', err);
      console.log('upload fail -', file.remotePath);
    } else {
      console.log('upload success -', file.remotePath, timming + 'ms');
    }
    // 每次上传之后检测下是否还有文件需要上传，如果没有就关闭连接
    if (__assets__.length === 0) {
      client.end();
    } else {
      uploadFile();
    }
  });
}

// 发起连接
function connect(conf) {
  if (!__connected__) {
    client.connect(__conf__);
  }
}

// 连接成功
client.on('ready', function() {
  __connected__ = true;
  uploadFile(Date.now());
});

// 连接已关闭
client.on('close', function() {
  __connected__ = false;
  // 连接关闭后，如果发现还有文件需要上传就重新发起连接
  if (__assets__.length > 0) connect();
});

/**
 * [deploy description]
 * @param  {Array}   assets  待 deploy 的文件
 * file.source      buffer
 * file.remotePath  path
 */
function deployWithFtp(conf, assets, callback) {
  __conf__ = conf;
  __assets__ = __assets__.concat(assets);
  connect();
}



var path = require('path');

/**
 * [DeployPlugin description]
 * @param {Array} options
 * option.reg 
 * option.to 
 */
function DeployPlugin(conf, options) {
  this.conf = conf;
  this.options = options;
}

DeployPlugin.prototype.apply = function(compiler) {
  var conf = this.conf;
  var options = this.options;
  compiler.plugin('done', function(stats) {
    var files = [];
    var assets = stats.compilation.assets;
    for (var name in assets) {
      options.map(function(cfg) {
        if (cfg.reg.test(name)) {
          files.push({
            localPath: name,
            remotePath: path.join(cfg.to, name),
            source: new Buffer(assets[name].source(), 'utf-8')
          });
        }
      });
    }
    deployWithFtp(conf, files);
  });
};


module.exports = DeployPlugin;

运用上面写的插件，实现同时在本地、测试环境开发，并能自动刷新和热更新。在 webpack.dev.js 里添加：

var DeployPlugin = require('./deploy.plugin');
// 是否发布到测试环境
if (deploy === true) {
  config.plugins.push(
    new DeployPlugin({
      user: 'username',
      password: 'password', 
      host: 'your host', 
      keepalive: 10000000
    }, 
    [{reg: /html$/, to: '/xxx/xxx/xxx/app/views/'}])
  );
}

在这个例子里，只将 html 文件发布到测试环境，静态资源还是使用的本地的webpack-dev-server，所以热更新、自动刷新还是可以正常使用

其他的发布插件：

deploy-kit (推荐)
sftp-webpack-plugin
webpack-sftp-client

webpack 问题及优化

改变代码时所有的 chunkhash 都会改变

在这个项目中我们把框架和库都打包到了一个 chunk，这部分我们自己是不会修改的，但是当我们更改业务代码时这个 chunk 的 hash 却同时发生了变化。这将导致上线时用户又得重新下载这个根本没有变化的文件。

所以我们不能使用 webpack 提供的 chunkhash 来命名文件，那我们自己根据文件内容来计算 hash 命名不就好了吗。
开发的时候不需要使用 hash，或者使用 hash 也没问题，最终产出时我们使用自己的方式重新命名：

$ npm i md5 --save-dev
$ touch build/rename.plugin.js

// rename.plugin.js

var fs = require('fs');
var path = require('path');
var md5 = require('md5');


function RenamePlugin() {
}

RenamePlugin.prototype.apply = function(compiler) {
  compiler.plugin('done', function(stats) {
    var htmlFiles = [];
    var hashFiles = [];
    var assets = stats.compilation.assets;

    Object.keys(assets).forEach(function(fileName) {
      var file = assets[fileName];
      if (/\.(css|js)$/.test(fileName)) {
        var hash = md5(file.source());
        var newName = fileName.replace(/(.js|.css)$/, '.' + hash + '$1');
        hashFiles.push({
          originName: fileName,
          hashName: newName
        });
        fs.rename(file.existsAt, file.existsAt.replace(fileName, newName));
      } 
      else if (/\.html$/) {
        htmlFiles.push(fileName);
      }
    });

    htmlFiles.forEach(function(fileName) {
      var file = assets[fileName];
      var contents = file.source();
      hashFiles.forEach(function(item) {
        contents = contents.replace(item.originName, item.hashName);
      });
      fs.writeFile(file.existsAt, contents, 'utf-8');
    });
  });
};

module.exports = RenamePlugin;

在 webpack.release.js 里添加：

// webpack.release.js

var RenamePlugin = require('./rename.plugin');
config.plugins.push(new RenamePlugin());