React项目本地启动

Question

通过Git clone下来的项目

1、依赖包已经全部下载完毕

2、webpack.config.js配置如下：

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var AssetsPlugin = require('assets-webpack-plugin');
var assetsPluginInstance = new AssetsPlugin();

//配置远程路径
var remotePath = "./__build__/";
fs.readdir(remotePath, function(err, files) {
    if (err) {

    } else {
        for (var i = 0; i < files.length; i++) {
            var filesName = files[i];
            if (filesName.indexOf("chunk.js") > 1) {
                fs.unlink('./__build__/' + filesName)
            }
        }
    }
})


module.exports = {
    entry: {
        bundle: "./web_app/index.js"
    },

    output: {
        path: __dirname + '/__build__',
        filename: '[name].js',
        chunkFilename: (new Date()).getTime() + '[id].chunk.js',
        publicPath: '/__build__/'
    },

    devtool: 'cheap-module-eval-source-map',

    devServer: {
        historyApiFallback: true,
        inline: true
    },

    plugins: [
    new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        },
    }),

    new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('./__build__/dll/lib-manifest.json')
    }),

    // 部分代码
    new AssetsPlugin({
        filename: '__build__/webpack.assets.js',
        processOutput: function(assets) {
            return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
        }
    }),

    new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
    })],

    resolve: {
        extensions: ['', '.js', '.jsx'],
        resolve: {
            alias: {
                moment: "moment/min/moment-with-locales.min.js"
            }
        }
    },

    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            // loaders: ['babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0'],
            query: {
                plugins: ["transform-object-assign"],
                presets: ['es2015', 'stage-0', 'react']
            },
            include: path.join(__dirname, '.')
        }, {
            test: /\.css$/,
            loader: 'style!css'
        }, {
            test: /\.less$/,
            loader: 'style!css!less'
        }, {
            test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
            exclude: /^node_modules$/,
            loader: 'file-loader?name=[name].[ext]'
        }, {
            test: /\.(png|jpg)$/,
            exclude: /^node_modules$/,
            loader: 'url?limit=20000&name=[name].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
        }]
    }

};

3、package.json内容如下：

    {
    "name": "xxx",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
        "start:dev": "webpack-dev-server --progress --colors --host localhost --port 6666 --inline --hot",
        "start:prod": "webpack && node server.js"
    },
    "author": "",
    "dependencies": {
        "antd": "^2.10.0",
        "compression": "^1.6.1",
        "cross-env": "^1.0.8",
        "echarts": "^3.1.1",
        "echarts-wordcloud": "",
        "element-resize-event": "^2.0.5",
        "es6-promise": "^4.0.5",
        "eslint": "^3.19.0",
        "eslint-plugin-babel": "^4.1.1",
        "eslint-plugin-react": "^6.10.3",
        "extract-text-webpack-plugin": "^1.0.1",
        "flux": "^3.1.0",
        "fullcalendar": "",
        "history": "^3.0.0",
        "isomorphic-fetch": "^2.2.1",
        "jquery": ">=2.1.4",
        "md5": "^2.2.1",
        "moment": "^2.15.1",
        "object-assign": "^4.1.0",
        "rc-pagination": "^1.6.2",
        "rc-time-picker": "",
        "react": "^15.4.1",
        "react-addons-create-fragment": "^15.4.1",
        "react-addons-shallow-compare": "",
        "react-addons-test-utils": "^15.4.1",
        "react-adsense": "^0.0.1",
        "react-datepicker": "^0.39.0",
        "react-dom": "^15.4.0",
        "react-router": "^3.0.0",
        "react-select2-wrapper": "",
        "react-test-renderer": "^15.4.0"
    },
    "devDependencies": {
        "assets-webpack-plugin": "",
        "babel-cli": "^6.6.0",
        "babel-core": "^6.18.2",
        "babel-eslint": "^5.0.0-beta4",
        "babel-loader": "^6.2.8",
        "babel-plugin-transform-es3-member-expression-literals": "*",
        "babel-plugin-transform-es3-property-literals": "*",
        "babel-plugin-transform-object-assign": "^6.22.0",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-react": "^6.16.0",
        "babel-preset-react-hmre": "^1.0.0",
        "babel-preset-stage-0": "^6.16.0",
        "bundle-loader": "^0.5.4",
        "css-loader": "^0.26.0",
        "element-resize-event": "^2.0.5",
        "express": "^4.14.0",
        "express-urlrewrite": "^1.2.0",
        "file-loader": "^0.9.0",
        "html-webpack-plugin": "^2.24.1",
        "http-proxy-middleware": "",
        "jest-cli": "^17.0.3",
        "jsx-loader": "^0.13.2",
        "less": "^2.5.3",
        "less-loader": "^2.2.2",
        "open-browser-webpack-plugin": "0.0.3",
        "react-addons-css-transition-group": "^15.3.0",
        "storybook": "",
        "style-loader": "^0.13.1",
        "url-loader": "^0.5.7",
        "webpack": "^1.13.3",
        "webpack-dev-middleware": "^1.6.1",
        "webpack-dev-server": "^1.16.2"
    },
    "license": "ISC"
}

4、运行webpack，打包成功后，再运行 npm start，运行结果如下：

但是，在浏览器里面访问不到，请问这是什么原因？

Answer 1

已找到原因，我自己项目是需要通过VPN访问远程数据库，这个时候需要在webpack.config.js中配置映射地址

Answer 2

sever启动了吗？
端口是对的吗

Answer 3

运行 node server.js 试试

Answer 4

你不会是开了代理吧？关掉代理，再试试。