标签: webpack-serve

webpack-serve:https://github.com/webpack-contrib/webpack-serve

webpack-dev-server:https://github.com/webpack/webpack-dev-server

他们都说他们是webpack的开发服务器.他们有什么不同？

我正在尝试使用webpack-serve（而不是 dev-server），但我对如何实际运行它感到有些困惑。

我安装了它，我有 npm、webpack 4 并在命令行中使用 VS Code。

在我看来，我应该只放置“webpack-serve”并且它应该运行但我只是得到

'webpack-serve' is not recognized as an internal or external command,
operable program or batch file.

我是否需要沿着这些路线设置一些路径或其他东西？

编辑

我通过在全球安装它来“构建”。

我现在试图让 webpack-serve 的功能与我使用 webpack-serve 时完全一样，但现在不是（它没有打开浏览器，不确定如何在开发模式和生产模式之间切换，也不确定如何让路由工作）

我在这里做了一个例子：https : //github.com/chobo2/webpack-serve-example

我有一个 Web 项目，其中使用webpack-dev-server了启用 HMR的工作 Webpack4 配置，并通过 npm 脚本以这种方式启动：

cross-env NODE_ENV=development webpack-dev-server --inline --hot

一切正常，HMR 适用于我的 js 和 scss 文件。现在我想知道是否可以扩展我的 Webpack 配置以在我修改视图模板文件时在浏览器中完全重新加载。

对我来说似乎不能自己webpack-dev-server做到这一点，所以我想我需要一些其他的插件。在谷歌搜索了一下之后，这是我得到的：

1. webpack-dev-server +浏览器同步-webpack-plugin
2. 将我的配置重写为webpack-serve，因为它似乎可以做到
3. chokidar + webpack-dev-middleware（用于重新加载的 API？）

所以我的问题是，使用 Webpack 4(.17.2) 获得 HMR + watch 给定路径并在文件更改（blade/twig/php/etc...）时重新加载浏览器的最佳方法是什么？

我当前配置的相关部分：

devServer: {
  index: '',
  open: true,
  hotOnly: true,
  publicPath: '/build/',
  host: 'mysite.test',
  proxy: {
    '**': {
      target: 'http://mysite.test',
      changeOrigin: true,
      headers: {
        'X-Dev-Server-Proxy': 'http://mysite.test'
      }
    }
  }
}

我所有的图像似乎都是 404，我认为我有正确的路径，因为我只是将它们粘贴在根目录中

我正在使用文件加载器并尝试加载 svg 文件

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

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    // filename and path are required
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        // JSX and JS are all .js
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  },
  plugins: [ …

我正处于将我的一个旧项目从 Webpack 3 更新到 4 的噩梦过程中，它引入了一整套需要修复的事情。迄今为止最烦人的肯定是从 webpack-dev-server 切换到 webpack-serve，因为它缺乏实际示例。考虑到这一点，我该如何使用它？

使用 Webpack 4.14.0 和 Webpack-Serve 1.0.4。

我的 webpack.config.js 有以下 webpack-dev-server 选项：

devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
}

我还没有看到历史或公共路径的选项，所以我想我只需要内容配置选项。

所以根据我应该做的文档：

serve({
    content: path.join(__dirname, 'public')
});

但是我把这个放在哪里？Github README 声称最常用的是放置它，webpack.config.js但这似乎是错误的，因为该示例也这样做：

const serve = require('webpack-serve');
const config = require('./webpack.config.js');

serve({ config });

我真的将配置文件导入到自身中吗？

我很欣赏一个例子。谢谢。