标签: webpack-dev-middleware

我在url-loader我的 webpack 构建过程中使用它，它为我import在我的 JS 文件中的任何图像文件正确移动图像文件（或创建 Base64 DataURL 字符串），例如：

import appleTouchIcon from '../../static/images/apple-touch-icon.png';

但是，当在 NodeJS（使用 Express）上进行服务器端渲染时，我看到以下错误：

/Users/jfender/Workspace/generetic/static/images/apple-touch-icon.png:1
(function (exports, require, module, __filename, __dirname) { ?PNG
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._extensions..js (module.js:580:10)
    at Object.newLoader [as .js] (/Users/jfender/Workspace/generetic/node_modules/pirates/lib/index.js:88:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

这是我的 webpack 配置：

module.exports = {
  entry: './applications/responsive/browser.js',
  output: {
    path: path.resolve(__dirname, 'static'),
    publicPath: …

因此，我尝试将webpack-dev-middleware和webpack-hot-middleware与 HtmlWebpackPlugin 结合使用，为此我遵循了以下链接https://github.com/jantimon/html-webpack-plugin/issues/145 但我真的无法理解这里的建议。

无论如何，我确实在输出 html 中获取了bundle.js 文件，但 js 没有按预期执行。此外，我确实HMR Connected在控制台中收到了消息。不过，这同样适用于我的生产 webpack 文件。

我该如何解决这个问题或着手解决这个问题？

另外，根据下面的项目结构，我提供了多个 html 文件，因此在 srcServer.js 中是否有关于这些文件合并的输入？

包.json

...
    "start": "babel-node buildScripts/srcServer.js"
...

srcServer.js

/* eslint-disable */
import express from 'express'
import path from 'path'
import opn from 'opn'
import bodyParser from 'body-parser'
import historyApiFallback   from 'connect-history-api-fallback'
import WebpackDevMiddleware from 'webpack-dev-middleware'
import WebpackHotMiddleware from 'webpack-hot-middleware'
import WebpackConfig from '../webpack.config'
import webpack from 'webpack'

const compiler = webpack(WebpackConfig)
const app = express() …

我有 Webpack/Phaser/Express 项目。当我加载应用程序时，Chrome 控制台中无法加载图像并出现以下错误：

GET http://localhost:8080/assets/ui/blue_button03.png 500 (Internal Server Error)

GET http://localhost:8080/assets/ui/blue_button02.png 500 (Internal Server Error)

将这些图像加载到移相器中：

this.load.image('blueButton1', 'assets/ui/blue_button02.png');
this.load.image('blueButton2', 'assets/ui/blue_button03.png');

我在尝试包含在移相器代码中的每个静态文件上都遇到了相同的错误。

网页包配置：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Phaser webpack config
const phaserModule = path.join(__dirname, '/node_modules/phaser/')
const phaser = path.join(phaserModule, 'src/phaser.js')

const definePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
    WEBGL_RENDERER: true, // I did this to make webpack work, but I'm not really sure it should always be true
    CANVAS_RENDERER: true …

我有一个使用webpack-dev-middleware的快速服务器.

如果从cli运行webpack-dev-server,则会出现"progress"选项,导致进度显示在控制台上.这是一个很好的功能,我也喜欢使用中间件.

这是可以实现的还是只适用于独立的开发服务器？

我搜索了文档但找不到与此相关的任何内容.

演示该问题的示例回购在这里。

我正在尝试设置 webpack 开发服务器，以便：

1. 请求/由public/landing.html（静态登录页面）提供服务
2. 对其他任何事物的请求由我的 React 应用程序提供

使用create-react-app, 并基于webpack-dev-server's options，我设置webpackDevServer.config.js如下：

historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebookincubator/create-react-app/issues/387. disableDotRule: true, rewrites: [ // shows views/landing.html as the landing page { from: /^\/$/, to: 'landing.html' }, // shows views/subpage.html for all routes starting with /subpage { from: /^\/subpage/, to: 'subpage.html' }, // shows views/404.html on all other pages { from: /./, …

所以我使用webpack dev中间件如下:

const compiledWebpack = webpack(config),
          app             = express(),
          devMiddleware   = webpackDevMiddleware(compiledWebpack, {
            historyApiFallback: true,
            publicPath: config.output.publicPath,
            overlay: {
              warnings: true,
              errors: true
            },
            compress: true,
            stats: { colors: true }
          })


    app.use(devMiddleware)




    app.get('*', (req, res) => {
      // Here is it! Get the index.html from the fileSystem
      const htmlBuffer = devMiddleware.fileSystem.readFileSync(`${config.output.path}/index.html`)

      res.send(htmlBuffer.toString())
    })

    app.listen(PORT, function () {})

    console.log('Running on port ' + PORT)

但是,出于某种原因,我没有得到实时重装.我也没有获得叠加功能.我正在使用此设置,因为我使用的是webpackhtmlplugin.

我觉得我在这里错过了一个简单的概念:(任何想法？

由于 html-webpack-plugin 和 webpack-dev-middleware (webpack-hot-middleware) 互操作中的 HMR 错误，我想在 html 文件更改（开发时）时重新加载页面。

这是我遇到此问题的两个存储库，两个存储库都存在问题。

• 打包
• webpack 模板

如何使用此工具重新加载页面？

• Node.js
• 表达
• webpack-dev-中间件

我有一个带Webpack Dev Middleware的Vue.js站点(由HTTP.sys Web服务器通过ASP.NET Core站点提供服务,但我猜这没关系).有谁知道我如何设置我的网站以清除浏览器的Javascript控制台在每个热重新加载事件？

这是我能找到的唯一相关链接,但它似乎是我不使用的Web服务器.我不确定为什么特定的Web服务器会很重要.

我在我的应用程序中使用了一个expressAPI，因此我使用webpack-dev-middleware和webpack-hot-middleware。

我试图弄清楚webpack --color当我webpack通过 API 使用时如何获取该选项。

这就是我现在所拥有的：

const webpack = require('webpack')
const webpackConfig = require('../../webpack.config')
const compiler = webpack(webpackConfig)

const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, {
  noInfo: true
})
const webpackHotMiddleware = require('webpack-hot-middleware')(compiler)

app.use(webpackDevMiddleware)
app.use(webpackHotMiddleware)

我目前正在使用webpack@2.2.0-rc.3.