webpack-dev-server 404＆如何正确设置？

Question

我来自哪里

我已经使用webpack已有一段时间了，但这是我第一次没有为此修改入门套件，而是尝试从头开始进行所有设置。

我跟随着Surviv.js.com上的这篇不错的文章，并继承了那里描述的一些方法，将它们与我的一些早期设置结合在一起（例如根据发送的生产变量设置不同的名称和路径）。

在讲座期间，我尝试尽可能多地运行“构建”和“开始”，以免被无法跟踪的意外行为所困扰。这很好。

然后在某个时候摆弄有关从第三方框架中排除未使用的CSS 的章节时，我以某种方式破坏了开发服务器的设置。（"run build"仍然有效！）

问题

我的热服务器定义为192.168.1.2:3000（这正是我想要的方式）。当我webpack-dev-server使用下面进一步显示的设置运行时，在该位置显示404（无法获取/）。现在，我已经读了很多有关如何正确设置webpack开发服务器的信息，但是由于我仍然不完全了解如何正确设置Webpack开发服务器，所以我仍然做得不好...（很可能不是这里一个人...）。路径有效。

这是我的理解（通用开发服务器设置）：

（如果我在这方面有误，请帮助我）

• 我的输出路径webpack.config.js只会在运行开发服务器时在内存中提供，因此在物理上是不可见的（path: path.join(__dirname, 'devServerFolder'例如，如果输出是我创建的文件夹，那么如果在我的项目结构中找不到该文件夹​​，我将永远看不到该文件夹​​） ）
• 静态index.html指向我bundle.js将一个文件夹中需要的地方我指向与publicPath以及与contentBase（这可能是我的devServerFolder，我就需要创建与index.html它;通常在网络上大部份的设定同样public使用的文件夹来保存生产建立）
• 如果我使用html-webpack-plugin该插件，它将自动为我生成该文件，而无需指向任何内容，因为bundle.js被插件写入了该文件

这些是真正使我难以理解的要点。我已经尝试了很多。的。不同。结合使用publicPath和contentBase设置时，运气不佳，无法重新建立我的开发服务器（工作正常）。 请注意，我在代码或使用编译我的版本时没有任何问题run build，它们可以正常运行并且应该正常运行。

配置

资料夹结构

webpack.test
|
| - app                    // App folder
     |
     | - index.js          // Entry point
     | - greet.js          // Hello World called by index.js
     | - sass              // Sass assets folder
     | - pug               // Pug (formerly jade) template and assets folder
| - node_modules
| - public                 // Production output folder
| - webpack-config-chunks  // Split up webpack configs folder
| - .babelrc 
| - package.json
| - webpack.config.js

Webpack.config.js

// Irrelevant parts omitted

const paths: {
  app:   path.join(__dirname, 'app'),    // The obvious one
  dev:   path.join(__dirname, 'bin'),
  /* As mentioned above, from my understanding,
     the output path for the dev server doesn't really matter at all
     when using html-webpack-plugin, am I wrong here? */
  build: path.join(__dirname, 'public')  // Another obvious one
  ...
};

...
entry: {
  app: production ? paths.app : [
    'webpack-dev-server/client?192.168.1.2:3000',
    'webpack/hot/only-dev-server',
     paths.app
  ]
  /* I can modify the entry to just be paths.app for every case
     but it won't change a thing regarding my problem. */
},

output: {
  path: production ? paths.build : paths.dev,
  publicPath: production ? '' : paths.dev + '/',
  /* ^ This is where I've tried just '' or paths.app or paths.build
       instead of paths.dev and delete publicPath all together. */
  filename: production ? '[name].[chunkhash].js' : '[name].js',
  chunkFilename: '[chunkhash].js'
},

devServer: {
  contentBase: paths.dev,
  /* ^ This = "webpack.test/bin" – See above.
       Tried several different paths here as well without luck. */
  hot: true,
  inline: true,
  stats: 'minimal',
  compress: true,
  host: '192.168.1.2',
  port: '3000',
},

plugins: [
  new HtmlWebpackPlugin(),
  new webpack.HotModuleReplacementPlugin(){
    multiStep: true
  }
]
...

Answer 1

如果您还没有这样做，请尝试将命令放入 npm 脚本“start”中。请注意，它是少数不需要“运行”的命令之一，因此“npm start”运行该命令。

另外，如果你不介意全局安装 webpack，npm 可以使用 webpack 命令。

    npm install webpack -g

下面我使用全局 webpack 命令（运行文件），然后告诉 npm 监视我列出的文件以进行更改，运行构建命令，启动 webpack-dev-server，然后在我想要的位置打开服务器。

    "scripts": {
     "build": "node-sass --output-style compressed src/css -o src/css",
     "start": "webpack --watch & webpack-dev-server --content-base dist --inline  & npm run build & open http://localhost:8080"
     },

请注意，我声明了 --content-base dist --inline。您在 webpack.config.js 文件中声明了这一点，因此无需在 package.json 中再次声明它。目前，我的 webpack.config 文件中没有任何 devServer 配置，并且一切仍然通过 npm 完美运行。

据我了解，npm 触发服务器，而 webpack.config.js 保存 webpack 命令的配置。