Question

我是webpack，nodejs和angular的新手，但我设法创建了一个应用程序，它在开发环境中运行良好，我使用“webpack -p”进行构建，生成静态文件（bundle.js和其他人），但我的应用程序没有加载！，我正在尝试正常访问它但我得到一个错误“GET http://localhost:8090/dashboard net :: ERR_CONNECTION_REFUSED”就像Web服务器关闭（当然是因为webpack-dev-server没有运行！），我只是不知道如何让应用程序在没有webpack-dev-server的情况下工作，我知道这是我没有的概念。请帮助!!!，pleeeease !!!，我被困在这里好几个星期!!。

kensplanet，我刚检查了代码并且我没有发现它与我的项目有太大不同（当然你遵循的良好做法:)），我的webpack配置似乎没问题，我复制了index.html文件并使用了我的bundle.js，我仍然遇到了同样的错误。

所以你知道我的开发环境：操作系统：Windows 7 SP1 NodeJS：v4.4.5 AngularJS：1.5.7 Webpack：1.13.1 ExpressJS：4.14.0（数据库在MySQL中），我正在使用UI组件库以方便前端（angular-ui.github.io/bootstrap /).

这是我得到的错误：

dateparser.js:1 Uncaught TypeError: e.module is not a function
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:11086)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18044)
    at t (http://localhost:8080/muestras/public/bundle.js:1:107)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18100)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18198)
    at t (http://localhost:8080/muestras/public/bundle.js:1:107)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:27:5019)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:27:5303)
    at t (http://localhost:8080/muestras/public/bundle.js:1:107)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18254)

当我在dateparser.js中看到详细信息时，我在此行中收到错误信号：

    angular.module('ui.bootstrap.dateparser', [])

.service（'uibDateParser'，['$ log'，'$ locale'，'dateFilter'，.....

这是我开发的webpack文件：

    var webpack = require('webpack');
    var path = require('path');

    module.exports = {
        devtool: 'inline-source-map',
        entry: [
            'webpack-dev-server/client?http://127.0.0.1:8090/',
            'webpack/hot/only-dev-server',
            'bootstrap-loader',
            './src'
        ],
        output: {
        path: path.join(__dirname, 'public'),
            filename: 'bundle.js'
        },
        resolve: {
            modulesDirectories: ['node_modules', 'src'],
            extension: ['', '.js']
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel',
                    query: {
                        presets: ['es2015']
                    }
                },
                {
                    test: /\.html$/,
                    loader: 'raw'
                },
                {
                    test: /\.scss$/,
                    loaders: [
                        'style',
                        'css',
                        'autoprefixer?browsers=last 3 versions',
                        'sass?outputStyle=expanded'
                    ]
                },
                {
                    test: /\.(woff2?|ttf|eot|svg)$/,
                    loader: 'url?limit=10000'
                },
                {
                    test: /bootstrap-sass\/assets\/javascripts\//,
                    loader: 'imports?jQuery=jquery'
                },
                {
                    test: /\.css$/,
                    loader: "style-loader!css-loader"
                }
            ]
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin(),
            new webpack.ProvidePlugin({
                jQuery: "jquery"
            })
        ],
        devServer: {
            hot: true,
            proxy: {
                '*': 'http://localhost:3000'
            }
        }
    };

Answer 1

您肯定需要服务器来运行您的应用程序。如果不是 webpack-dev-server ，那么NodeJS中的其他HTTP服务器如 http-server （https://www.npmjs.com/package/http-server）。

转到index.html所在的文件夹，然后从那里运行 http-server 。

如果没有服务器，将无法运行您的应用程序，因为这会导致以后出现AJAX跨域问题。

但是，在Chrome中，有一种方法可以使用 - disable-web-security标志来解决此问题。

选中此项Disable same origin policy in Chrome

如何在不使用webpack-dev-server的情况下提供我的应用程序？

1 个答案: