标签: webpack-dev-middleware

我开始使用开发服务器端渲染应用程序webpack的node/express环境.我对devpack和prod(运行时)环境中每个webpack包的作用感到非常困惑.ReactJSreact-router

以下是我的理解摘要:

webpack:是一个包,一个将Web应用程序的不同部分连接在一起的工具,然后捆绑在一个.js文件中(通常bundle.js).然后,结果文件在prod环境中提供,由应用程序加载,并包含运行代码所需的所有组件.功能包括缩小代码,缩小等.

webpack-dev-server:是一个提供服务器来处理网站文件的包.它还bundle.js从客户端组件构建单个.js文件(),但在内存中提供.它还具有option(-hot)来监视所有构建文件,并在代码更改的情况下在内存中构建新的bundle.服务器直接在浏览器中提供(例如:)http:/localhost:8080/webpack-dev-server/whatever.内存加载,热处理和浏览器服务的结合使用户可以在代码更改时在浏览器上更新应用程序,非常适合开发环境.

如果我对上述文字有疑问,我真的不确定下面的内容,所以如有必要请告诉我

当使用一个常见的问题webpack-dev-server有node/express是webpack-dev-server一个服务器,是node/express.这使得运行客户端和某些节点/快速代码(API等)的环境变得棘手.注意:这是我所面对的,但很高兴理解为什么会在更多细节中发生这种情况......

webpack-dev-middleware:这是一个具有相同功能webpack-dev-server(内存捆绑,热重新加载)的中间件,但其格式可以注入server/express应用程序.通过这种方式,您可以webpack-dev-server在节点服务器中使用某种服务器(内部). 哎呀:这是一个疯狂的梦吗??? 这件作品如何解决开发和生产方程,使生活更简单

webpack-hot-middleware:这......被困在这里...找到这件作品时webpack-dev-middleware......不知道如何使用它.

ENDNOTE:对不起,有任何错误的想法.我真的需要帮助才能在复杂的环境中找到这些变体.如果方便的话,请添加更多将构建整个场景的软件包/数据.

我有一个用TypeScript编写的项目,我可以利用Webpack Hot Reload,在我的Node.js服务器中使用两个webpack-hot-middleware和webpack-dev-middleware库.

此外,我已经为我的Stylus代码配置了所有构建步骤(使用Gulp进行增量构建),这会在我的公共目录中生成一个单独的CSS文件.

所以,现在我想利用Webpack对CSS的热重载,因为我已经有了我的TypeScript内容,但我不想让它构建我的CSS文件,因为我已经有了很棒的东西.理想情况下,我只想让Webpack在每次更改时热重新加载我的单个CSS文件.实现这一目标的最简单,最好的方法是什么？

我当前的配置文件如下所示:

const webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './src/client/index.tsx'
  ],
  output: {
    path: '/public/js/',
    filename: 'bundle.js',
    publicPath: '/js/'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ];
};

然后,我使用Webpack Hot Middleware和Webpack Dev Middleware,如下所示:

const webpackConfig = require('../webpack.config');
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath …

我有一个使用Express的Webpack/React/Redux项目,我在理解它们如何组合时遇到了一些麻烦.我的Express应用程序运行Webpack并提供我的root index.html文件,如下所示:

const app = express();
const server = require("http").createServer(app);

app.use(bodyParser.json());
app.use("/some/path", express.static(path.join(__dirname, "/public")));

// webpack middleware
const compiler = webpack(webpackConfig);

const webpackDevMid = require("webpack-dev-middleware");
const webpackHotMid = require("webpack-hot-middleware");

app.use(webpackDevMid(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath  // '/static/'
}));

app.use(webpackHotMid(compiler));

app.get("/", (req, res) => {
    if (!req.cookies.access_token) return res.redirect("/login");
    return res.sendFile(path.join(__dirname, "index.html"));
});

然后我的根索引文件在主体中具有"root"标记,在脚本标记中具有Webpack"/static/bundle.js".root标记指向捆绑在bundle.js中的index.js文件,所有内容都正确呈现.一切正常.

我的问题是我试图在我的root index.html中包含我的favicon.ico,它没有与Webpack捆绑在一起,所以我想把它作为一个静态文件用Express,我通常用代码做:

app.use("/some/path", express.static(path.join(__dirname, "/public")));

不幸的是,这个文件夹没有被提供给客户端,我无法在Webpack包之外访问我的favicon(我的index.html没有自行决定访问).事实上,我尝试以这种方式向客户端公开的任何东西都在起作用.有什么我不了解webpack-dev-middleware,或Express服务器与Webpack一起工作的方式？是什么赋予了？

我正在使用webpack-dev-middleware以及在客户端使用react-router的react应用程序.

如果我在根目录下输入应用程序/,但webpack-dev-middleware不会提供任何路径,例如'/ my-route`,那么一切都很顺利

server.use(webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

我尝试使用通配符,它​​允许所有路径通过并获取html页面,但是当页面请求时main.js,它现在也获得了html页面,而不是打包的javascript.

server.use('/*', webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

目标是服务器不知道的任何路由,获取与root相同的内容,然后react-router将处理在客户端上显示正确的视图(或404).

任何帮助将非常感激.

我们已经使用 webpack-dev-server 设置了我们的开发环境。我们使用其代理配置与后端通信。

我们在所有应用程序中使用的服务器中有一个通用登录页面。我们被调用，它设置了一个会话 cookie，期望与后续请求一起传递。我们使用了以下配置，但由于某种原因未在浏览器中设置 cookie。我可以在开发工具的网络选项卡的响应标头中看到它。

const config = {
  devServer: {
     index: "/",
     proxy: {
     "/rest_end_point/page": {
           target: "https://middleware_server",
           secure : false
     },         
     "/": {
           target: "https://middleware_server/app/login",
           secure : false
    },        
}

在https：//开头middleware_server /应用/登录端点与Set-cookie头返回登录页面。

代理用于在访问登录页面和 API 调用时避免 CORS 错误。

到目前为止，还没有执行来自应用程序的代码。我们是否必须在 coomon 登录页面中执行某些操作才能设置 cookie？

该应用程序是用 React 编写的。

任何帮助，将不胜感激。

我有一个名为“quasar.styl”的文件：

@import './quasar.variables'
@import '~quasar-styl'

当它被 webpack 使用 styl-loader 处理时，我收到以下错误：

failed to locate @import file ~quasar-styl.styl

我有这种感觉，关于手写笔有些东西我不明白。它会在哪里寻找文件“~quasar-style”？

该文件来自一个正在运行的样板类星体应用程序，并且应用程序目录中的任何位置都没有调用的文件quasar-style，尤其是node_modules，这是我收集波浪号告诉它要查看的地方。

有任何想法吗？

更新：我在这里上传了类星体样板项目： https ://repl.it/@jmbldwn/Quasar-Boilerplate-2

它无法在 repl.it 上运行，因为它需要 quasar-cli，但您可以在那里看到它生成的所有文件。

我正在将 Webpack 实施到旧版 Express 前端应用程序中。我已经按照说明实现了 webpack-dev-middleware 和 webpack-hot-middleware，但我不知道如何实际引用 webpack-dev-middleware 在我的索引文件中构建的内存包。

server.js:

...... 
// Webpack HMR
if (isDevelopment) {
  const webpack = require('webpack');
  const webpackConfig = require('./webpack.config');
  const compiler = webpack(webpackConfig);

  app.use(
    require('webpack-dev-middleware')(compiler, {
        noInfo: false,
        hot: true,
        publicPath: webpackConfig.output.publicPath,
    })
  );
  app.use(require('webpack-hot-middleware')(compiler));
}
....

webpack.config.js:

...
entry: {
    app: [
      'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr&timeout=2000&overlay=false',
      path.join(__dirname, './public/js/boot/app.js'),
    ],
    deps: [
      'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr&timeout=2000&overlay=false',
      path.join(__dirname, './public/js/boot/deps.js'),
    ]
  },
output: {
    path: isDevelopment ? path.join(__dirname, './public/js/bundles') : path.join(__dirname, './dist/js/bundles'),
    publicPath: '/',
    filename: '[name].js'
  },
....

Base view: server/views/index.jade: …

目前正在学习 React JS，我对这些技术仍然是新手。

将 webpack 从 4.30.0 更新到 5.10.0 然后我运行后npm start，出现了一些错误，如下所示。我尝试删除node_modules并重新安装，然后npm start，它没有改变任何东西。

依赖项：

"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "4.0.2",
"webpack-hot-middleware": "2.25.0",
"webpack-pwa-manifest": "4.3.0",

错误 ：

首先，我在这里找到了许多类似的主题，但即使参考了它们，我仍然无法让它工作。

所以，我的问题只是Cannot GET /我localhost:3000在运行我的快速服务器（使用npm run serve）后访问时进入了 Chrome 。不是找不到bundle.js文件；它根本找不到index.html。

当我npm run serve在 package.json 文件中运行脚本时，我在服务器控制台上没有看到任何错误。Webpack 构建（从 Webpack-dev-middleware 调用）日志也没有显示错误。

如果我直接从终端运行 webpack-dev-server 并访问相同的 URL，它可以正常工作。（我已经覆盖了主机和端口，以配合我使用的Express服务器，通过者devServer中选择webpack.config.js。）

我究竟做错了什么？

文件夹结构

/client
    /main.js    
/dist
    /index.html
    /assets/
/server
    /server.js
/webpack.config.js
/package.json

webpack.config.js

const path = require('path');

module.exports = {
  entry: './client/main.js',

  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },

  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /node_modules/,
      },
      {
        use: ['style-loader', 'css-loader', 'sass-loader'], …

我有一个基本设置，每个应用程序都在一个单独的目录中，我使用自定义服务器使用webpack-dev-middleware/编译它们webpack-hot-middleware。一切正常，只是我无法让 HMR 为第二个应用程序工作（我正在使用react-hot-loader）。

这是说明问题的最小回购： https //github.com/AmrN/multi-react-app-hmr

我的主要代码文件：

webpack.config.js

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

module.exports = function (appName) {
  return {
    devtool: 'cheap-module-eval-source-map',
    entry: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      path.join(__dirname, appName, 'index'),
    ],
    output: {
      path: path.join(__dirname, 'dist', appName),
      filename: 'bundle.js',
      publicPath: '/'+appName+'/'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, appName, 'index.html'),
      }),
    ],
    module: {
      loaders: [{
        test: /\.jsx?$/,
        loaders: ['babel-loader'],
        exclude: /node_modules/, …