标签: webpack-dev-server

我正在尝试使用webpack-dev-server和react-router启动并运行.我的麻烦是,我似乎无法连接基本页面 - 我的主文件看起来像:

import React from 'react'
import { history } from 'react-router/lib/HashHistory'
import App from './js/app'


React.render(<App history={history} />, document.getElementById('app'));

我有一个标准的webpack.config.js.

webpack如何从'react-router/lib/HashHistory'加载任何内容？该路由器不会在HDD上产生任何物理文件.从哪里载入？可能只是这个问题的最新测试问题吗？

下面是我的 webpack.config.js 代码

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

module.exports = {
    // context: __dirname + "/app",
   entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/only-dev-server',
     './src/main.jsx'],
    output: {
        path: "./build",
        filename: "main.js"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loaders:  ['react-hot', 'babel'],
          include: path.join(__dirname, 'build'),
          query:
            {
              presets:['es2015', 'react']
            },
          plugins: [
            new webpack.HotModuleReplacementPlugin()
          ]
        }
      ]
    }
}

这是我的 package.son 的脚本代码

  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval …

我从这里使用了一个示例项目来设置一个带有热模块替换的webpack项目.然后我建立了一个示例骨干应用程序.

// main.js
import $ from 'jquery';
import Backbone from 'backbone';

import Router from './router';

window.app = window.app || {};

const app = new Backbone.Marionette.Application();
app.addRegions({content: '#content'});

app.on('start', () => {
    if (Backbone.history)
      Backbone.history.start({ pushState: true })
}

);

app.addInitializer(() => {
  return new Router();
});


$( () => { app.start() });

// HMR
if (module.hot) {
    module.hot.accept();
}

我可以看到HRM根据[HMR] connected调试输出正在加载.当文件发生变化时,我可以看到它根据以下输出重建并推送到客户端的更新:

[HMR] Updated modules:
process-update.js?e13e:77 [HMR]  - ./app/backbone/views/template.hbs
process-update.js?e13e:77 [HMR]  - ./app/backbone/views/hello.js
process-update.js?e13e:77 [HMR]  - ./app/backbone/router.js …

我正在为我的项目使用webpack-dev-server v1.14.1,整个项目结构如下:

|----src
|     |----index.js
|     |----components
|     |     |----a.js
|     |----containers
|           |----sub-containers
|                 |----b.js 
|     
|----package.json
|----webpack.config.dev.js

但是,当我运行命令"webpack-dev-server --inline"时,服务器只能捕获a.js文件中的更改.它忽略了b.js文件中的更改.有什么想法吗？

有没有办法只允许使用 Webpack Dev Server 代理 POST 请求？我的应用程序将 /login 用于 GET 请求，不幸的是，无论 HTTP 方法如何，它都被代理到我的其他主机。

    // Serve the Relay app
    const compiler = webpack(config);
    appServer = new WebpackDevServer(compiler, {
        contentBase: '/public/',
        proxy: {
            '/login': `http://localhost:${GRAPHQL_PORT}`, // only for POST?
        },
        publicPath: '/js/',
        stats: {
            colors: true,
            chunks: false,
        },
        historyApiFallback: true
    });

所以我有以下 webpack 配置：

import path from 'path';

module.exports = {
    entry: {
    index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module:{
        loader:{
            test: /\.js$/,
            exclude:path.resolve(__dirname, "node_modules"),
            loader: 'js'
        }
    }

};

问题是，当我做文件时，每次更改都会webpack --watch在/dist/文件夹中构建。然而，当我运行这些webpack-dev-server文件时，甚至都没有构建。这是为什么？

请帮忙。

我一直在关注如何使用带有角度2的webpack 2的angular 文档.我的代码(这里是github src )是根据webpack.dev.js场景设置的.

使用npm start(即webpack-dev-server --inline --progress --port 8080)运行开发构建会产生一系列TS2304错误,例如

ERROR in [at-loader] src\app\app.component.ts:5:15
    TS2304: Cannot find name 'require'.

ERROR in [at-loader] src\app\app.component.ts:6:14
    TS2304: Cannot find name 'require'.

出了什么问题？

无法解决如何强制 WebPack 3.6 构建最终dist。
只是输出文件夹是空的。使用给定的配置，应用程序在浏览器内存中构建并运行，但是dist文件夹是空的，现在有任何物理文件。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');

const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname);
const buildPath = path.join(__dirname, 'dist');

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: {
        /*base: path.resolve(staticSourcePath, 'src/sass/base.scss'),*/
        app: path.resolve(sourcePath, 'index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash].js', …

我正在使用 Webpack-4。当前的行为是，当 webpack-dev-server 运行时， /build 下的文件根本没有更新，而是显示文件目录。

如果我删除/build 下的文件，webpack-dev-server 会给出无法获取/。我想，它应该从内存中加载它们。

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
   template: "./src/index.html",
   filename: "./index.html"
});

const path = require('path');

module.exports = {
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build/'),
},

module: {
    rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env","react"]
                }
            }
        },
        { 
            test: /\.html$/,
            use: [{
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }
    ]
},
plugins: [
    htmlPlugin
],
devServer: {       
    contentBase: …

我正在按照教程使用 create-react-app 创建一个 React 应用程序。

加载 webpack-dev-server 时，有许多依赖项没有安装。

当我尝试 npm run start 时出现以下错误。

这是什么意思，谁能告诉我需要什么来修复它？

模块构建失败：错误：找不到相对于目录“/[Proeject folder]/frontend”的预设“react-app”