ReactNative轉ReactWeb（webpack、react-web）

打包工具:webpack

主要依賴包: react-web, babel, react,react-dom....

 

webpack.config.js代碼：

'use strict';
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var HtmlPlugin = require('webpack-html-plugin');
var HasteResolverPlugin = require('haste-resolver-webpack-plugin');


var IP = '0.0.0.0';
var PORT = 3000;
var NODE_ENV = process.env.NODE_ENV;
var ROOT_PATH = path.resolve(__dirname, '..');
var PROD = 'production';
var DEV = 'development';
var JsonObj=JSON.parse(fs.readFileSync(path.join(ROOT_PATH, 'module_map.json')));
let isProd = NODE_ENV === 'production';

var config = {
  paths: {
    src: path.join(ROOT_PATH, '.'),
    index: path.join(ROOT_PATH, 'index.ios'),
  },
};
var aliasObj = JsonObj;
aliasObj['react-native'] = 'react-web';
module.exports = {
  ip: IP,
  port: PORT,
  devtool: 'source-map',
  resolve: {
    alias: aliasObj,
    extensions: ['', '.js', '.jsx'],
  },
  entry: isProd? {
		// tweak this to include your externs unless you load them some other way
      'react-web': ['react-native'],
      'index': config.paths.index
  }: [
    'webpack-dev-server/client?http://' + IP + ':' + PORT,
    'webpack/hot/only-dev-server',
    'react-web',
    config.paths.index
  ],
  output: {
    path: path.join(__dirname, 'output'),
    filename: '[name].js',
    sourceMapFilename: '[file].map',
  },
  plugins: [
    new HasteResolverPlugin({
      platform: 'web',
      blacklist: ['pages', 'lib'],
    }),
    new webpack.DefinePlugin({
        'process.env': {
          // This has effect on the react lib size
          'NODE_ENV': JSON.stringify('production'),
        }
      }),
      new webpack.optimize.DedupePlugin(),

	  new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        },
      }),

      new webpack.optimize.CommonsChunkPlugin('react-web', 'react-web.js'),
      new HtmlPlugin({
        filename: 'index.html',
        hash: true,
        title: 'indexTitle',
        chunks: ['react-web', 'index']
      }),
  ],
  module: {
    loaders: [
		{
			test: /\.jsx?$/,
			loaders: ['babel?compact=false&presets[]=react,presets[]=es2015','jsx'],
			include: [config.paths.src],
		    //loaders: ['babel', 'jsx'],
			//exclude: [/node_modules/]
		},
		/*	
		{
		  test: /\.json$/,
		  loader: 'json',
		}, {
		  test: /\.jsx?$/,
		  loaders: ['react-hot', 'babel'],
		  include: [config.paths.src],
		  exclude: [/node_modules/]
		}*/
	
	]
  }
};