我webpack-dev-server v1.10.1用来提升我的Redux项目,我有以下选项:

contentBase: `http://${config.HOST}:${config.PORT}`,
quiet: false,
noInfo: true,
hot: true,
inline: true,
lazy: false,
publicPath: configWebpack.output.publicPath,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true}

在JS中,我使用requestfrom superagent来生成HTTP GET调用

request
          .get(config.APIHost + apiUrl)
          .set('Accept', 'application/json')
          .withCredentials()
          .end(function (err, res) {
                if (!err && res.body) {
                    disptach(() => {
                        return {
                            type: actionType || GET_DATA,
                            payload: {
                                response: res.body
                            }
                        }
                    });
                }
          });

但是我收到了CORS错误:

XMLHttpRequest cannot load http://localhost:8000/api/getContentByType?category=all. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5050' …

我有一个ApiCaller.js模块,它生成调用我们的api服务器来获取数据.它有const字段API_URL,它指向服务器url.此API_URL const针对dev和prod环境进行更改.

因此,当我需要部署到开发环境时,我需要手动更改该URL(API_URL)以指向dev-api-server,反之亦然.

我想在代码之外的这些配置参数,并在构建过程中我想动态更改它们,以便我可以使用不同的设置进行构建.

我正在使用webpack捆绑我的javascript,html,css文件.

我正在使用这个有角度的4种子应用程序:https://github.com/2sic/app-tutorial-angular4-hello-dnn

它使用webpack并且工作正常.

它似乎只提供开发文件而不是dist /文件夹.

我想要提供dist文件夹.

不确定执行此操作的命令,或者我是否需要安装lite服务器或其他东西.

我运行此命令来创建dist文件夹(工作正常):

g build --prod --aot --output-hashing=none

现在我想在浏览器中运行此构建.

我已经在webpack中设置了一个基本的反应应用程序但是我无法webpack-dev-server正常运行.

我已webpack-dev-server全局安装并尝试运行该命令,sudo webpack-dev-server --hot因为需要热重新加载.

该项目似乎只用webpackcmd 工作正常.它构建到我的构建文件夹中,我可以通过某个服务器使其工作,但它无法使用webpack-dev-server.从终端明确表示构建过程已经完成,没有错误被抛出[ webpack: bundle is now VALID.]并且它实际上正在正确地观察,因为在任何更改它确实触发构建过程但它并没有真正构建[它不服务我的捆绑. JS].我尝试更改整个配置仍然无法解决问题.

如果有人可以提供帮助,我将不胜感激.

以下是我的webpack.config.js文件.

var path = require('path');

module.exports = {
    devtool: '#inline-source-map"',

    watch: true,
    colors: true,
    progress: true,

    module: {
        loaders: [{
            loader: "babel",
            include: [
                path.resolve(__dirname, "src"),
            ],
            test: /\.jsx?$/,
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015', 'react', 'stage-0'],
            }
        }, {
            loader: 'style!css!sass',
            include: path.join(__dirname, 'src'),
            test: /\.scss$/
        }]
    },

    plugins: [],
    output: {
        path: path.join(__dirname, 'build/js'), …

运行时出错webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/.这是错误日志:

module.js:442
throw err;
^

Error: Cannot find module 'webpack/bin/config-yargs'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3) 

我是JS开发的新手,尝试使用webpack-dev-server热插拔更改我保持异常.确切的堆栈是:

Error: `output.path` needs to be an absolute path or `/`.
at Object.Shared.share.setFs (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:88:11)
at Shared (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:214:8)
at module.exports (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/middleware.js:22:15)
at new Server (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/lib/Server.js:56:20)

at startDevServer (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:379:12)
at processOptions (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:317:3)
at Object.<anonymous> (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:441:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)

这是我已经尝试过的webpack配置文件:

module.exports = {
    entry: "./client/app.jsx",
    output: {
        path: "dist/js",
        filename: "bundle.js",
        publicPath: "http://127.0.0.1:2992/js"
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                include: /client/
            }
        ]
    }
};

和:

module.exports = {
    entry: "./client/app.jsx",
    output: { …

我用ng CLI创建了一个新的应用程序,就像一个魅力: ng new babysteps cd babysteps ng serve ng服务使用webpack来组装应用程序.要完全测试它,我需要/api...从我的API模拟服务器(特别是POST请求)提供服务.如何自定义使用的Web服务器,重定向一个URL模式？

Webpack dev服务器有一个代理设置,但似乎(？)ng serve没有配置文件(或者我没有得到).

我是否需要创建webpack.config.js或创建/编辑其他一些代理文件？

我知道大多数人都有相反的问题但我实际上想要禁用自动重新加载功能.

这是我运行我的服务器的方式:

webpack-dev-server --open --progress

这是我的dev服务器配置:

devServer: {
    contentBase: 'app',
    port: 9005,
    hot: false,
    inline: false
}

版本:

"webpack": "1.14.0",
"webpack-dev-middleware": "1.9.0",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "2.13.2",
"webpack-md5-hash": "0.0.5"

使用此设置,webpack dev服务器将打开初始页面,localhost:9005/webpack-dev-server/同时启用自动重新加载(iframe模式).当我设置inline为true然后它打开localhost:9005并且自动重新加载仍然打开(inlinemode => websockets).

有没有办法完全禁用自动重新加载？

我的Webpack配置中有以下模块:

module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, …

这是我的webpack配置的代码:

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], 
  module: {
    loaders: [
      {
        exclude: /node_modules/, 
        test: /\.js$/, 
        loader: 'babel',
      },
    ],
  },
  output: {filename: 'app.js', path: '/'}, 
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/', 
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}, 
});

app.use('/', express.static(path.resolve(__dirname, 'public')));

工作正常,应用程序运行在localhost:3000/index.html但是当我尝试实现React Router dom v4时.它不起作用.这是代码:

const About = () => <div> <h1>About</h1> </div>

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/' component={App}/>
      <Route  path='/about' component={About}/>
      </div>
    </BrowserRouter>,
  mountNode
);

这是localhost的结果:3000/ 在localhost:3000 /约.我收到一个错误:无法获取/关于.不是我期待的,为什么这不会呈现？

关于