basedonwebpacknodereactrem布局
生产环境和开发环境

1.package.json配置

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


2.webpack.config.js配置

判断生产环境还是开发环境:
varisProduction=function(){
returnprocess.env.NODE_ENV==='production';
}

配置出口目录
publicPath:isProduction()?'./build':'//localhost:8888'

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

执行命令

1.开发环境

npmrundev

相当于：
webpack-dev-server

npmrunbuild

相当于：
webpack


3.生产环境

npmrundeploy

其他
初始化
ReactDom.render(

,document.getElementById('app'));

或者
ReactDom.render((

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

但是，不能写成
ReactDom.render(

),document.getElementById('app');

这样写会报错，如下：
_registerComponent(...):TargetcontainerisnotaDOMelement


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

constLOGOSRC=require('./imgs/logo.png')//good

~~备注：这样打包之后main.js文件明显变大很多，暂时还没有想到优化方法~~
——本案例和图片loader有关，本例子配置文件webpack.config.js，img-loader,默认limit=819200字节，即小于800kb的图片都会被转成base64位。


可以通过loader后面加参数单独输出图片文件夹,也可以加hash值
{test:/\.(png|jpg|gif)$/,loader:'url?limit=8192&name=images/[hash:8].[name].[ext]'},//小于8kb转base64位处理    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！