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(
<App />
, document.getElementById('app'));
或者
ReactDom.render((
<App />
), document.getElementById('app'));
但是，不能写成
ReactDom.render(
<App />
), document.getElementById('app');
这样写会报错，如下：
_registerComponent(...): Target container is not a DOM element
图片引入
页面中不要通过src直接引入图片路径，应通过require这样react的方式引入，否则打包输出时会出问题
 //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位处理
