webpack.base.js
const path = require('path');
const csswring = require('csswring');
const autoprefixer = require('autoprefixer');
const eslintFormatter = require('eslint-friendly-formatter');
module.exports = {
resolve: {
packageAlias: "browser",
extensions: ['', '.jsx', '.js', '.json'],
fallback: [path.join(__dirname, '../node_modules')],
modulesDirectories: ['node_modules', 'src'],
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')],
},
module: {
// preLoaders: [
// {
// test: /\.js$/,
// loader: 'eslint',
// exclude: /node_modules/,
// },
// ],
loaders: [
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff',
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff2',
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream',
}, {
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-otf',
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file',
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
}, {
test: /\.css$/,
loader: 'style!css?camelCase!postcss-loader',
}, {
test: /\.scss$/,
loader: 'style!css?camelCase!postcss-loader!sass',
}, {
test: /\.(jpg|png|gif)$/,
loader: 'url',
query: {
limit: 8192,
name: 'image/[name].[hash:7].[ext]',
},
}],
},
babel: {
presets: ['es2015', 'stage-0', 'react'],
plugins: ['transform-decorators-legacy', 'transform-runtime'],
comments: false,
},
postcss: () => [
autoprefixer({ browsers: ['last 2 versions', 'safari 5', 'ie 9', 'ios 6', 'android 4'] }),
csswring],
eslint: {
formatter: eslintFormatter,
},
};
webpack.prod.js
const path = require('path');
const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base.js');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(baseWebpackConfig, {
entry: [
'./src/index',
],
output: {
filename: 'bundle.js',
path: path.join(__dirname, '../dist/'),
publicPath: '/',
},
resolve: {
alias: {
config: path.join('../config', 'production.js'),
},
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.template.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
},
}),
],
});
加载sdk的代码
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import configureStore from './store/configureStore';
import routes from './routes';
// import { syncReduxAndRouter } from 'redux-simple-router';
import { syncHistoryWithStore } from 'react-router-redux';
//import xxx from 'react-router-redux';
//var syncHistoryWithStore = xxx.syncHistoyWithStore;
import 'babel-polyfill';
import AV from 'avoscloud-sdk';
import 'leancloud-analytics'; //only need the side effect
import config from 'config'; // an aliased module. check webpack conf
AV.initialize(config.APP_ID, config.APP_KEY);
//old window.AV is written by analytics. Need to merge the two
AV.analytics = window.AV.analytics;
window.AV = AV;
const analytics = AV.analytics({
// 设置 AppId
appId: config.APP_ID,
// 设置 AppKey
appKey: config.APP_KEY,
});
window.analytics = analytics;
const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<div className="fill-parent">
<Router history={history}>
{routes}
</Router>
</div>
</Provider>,
document.getElementById('root')
);