Webapp Demo

sunset.png

Webapp Demo

based on webpack node react rem布局

生产环境和开发环境

• 1.package.json配置

    "scripts": {
      "test": "test",
      "dev": "webpack-dev-server",
      "build": "webpack",
      "deploy": "NODE_ENV=production webpack --progress --colors"
    }

• 2.webpack.config.js配置

判断生产环境还是开发环境:

var isProduction = function () {
  return process.env.NODE_ENV === 'production';
}

配置出口目录

    publicPath: isProduction()? './build' : 'http://localhost:8888'

exports配置

    if (isProduction()){ //使用js压缩等插件}else{使用source-map等}

执行命令

• 1.开发环境

npm run dev

相当于：

webpack-dev-server

npm run build

相当于：

webpack

• 3.生产环境

npm run deploy

其他

初始化

ReactDom.render(
  
  , document.getElementById('app'));

或者

ReactDom.render((
  
), document.getElementById('app'));

但是，不能写成

ReactDom.render(
  
), document.getElementById('app');

这样写会报错，如下：

_registerComponent(...): Target container is not a DOM element

图片引入

页面中不要通过src直接引入图片路径，应通过require这样react的方式引入，否则打包输出时会出问题

 ![](./app/imgs/item-one-img.png) //bad

const LOGOSRC = require('./imgs/logo.png') //good

~~ 备注：这样打包之后main.js文件明显变大很多，暂时还没有想到优化方法~~

——本案例和图片loader有关，本例子配置文件webpack.config.js，img-loader,默认limit=819200字节，即小于800kb的图片都会被转成base64位。

• 用默认limit=819200（800kb），打包输出,如下图：

  

  limit819200.png

• 改为limit=81920（80kb），打包输出，如下图：

  

  limit81920.png

~~_{备注：此时图片应如何处理呢？}~~

可以通过loader后面加参数单独输出图片文件夹,也可以加hash值

{test: /\.(png|jpg|gif)$/, loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'},//小于8kb转base64位处理