webapp开发技术学习生产环境和开发环境等项目编程指南

basedonwebpacknodereactrem布局

生产环境和开发环境  webapp开发技术学习

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’:’http://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’);

webapp开发技术学习

这样写会报错,如下:

_registerComponent(…):TargetcontainerisnotaDOMelement

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

![](./app/imgs/item-one-img.png)//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位处理

 

评论

电子邮件地址不会被公开。