webpack-dev-server 404 以及如何正确设置它？

我从哪里来

我使用webpack已经有一段时间了，但这是我第一次没有修改它的入门工具包，试图从头开始设置一切。

我遵循了这篇关于survivejs.com的好文章，并继承了其中描述的一些方法，将它们与我以前的一些设置相结合(比如根据发送的生产变量设置不同的名称和路径)。

我试着在讲座期间尽可能多地运行"build"one_answers"start"，以免被一些我无法追踪的意外行为所捕获。

然后在摆弄关于从第三方框架中排除未使用的css的章节时，我不知何故破坏了我的开发服务器设置。("run build"仍然工作!)

<标题>

我的热服务器定义为192.168.1.2:3000(这正是我想要的)。当我使用下面所示的设置运行webpack-dev-server时，我在该位置得到一个404 (Cannot get/)。现在我已经读了很多关于如何正确设置webpack开发服务器的，但我仍然没有得到它的权利…(很可能不是一个人…)因为我仍然没有完全理解路径是如何工作的。

这是我的理解(通用开发服务器设置):

(如果我错了，请帮助我)

我的webpack.config.js的输出路径将只在内存中服务，而运行开发服务器，因此不被物理可见(如果输出是path: path.join(__dirname, 'devServerFolder'例如，我永远不会看到文件夹在我的项目结构的任何地方，如果它不是为我创建它)
指向我的bundle.js的静态index.html将需要在一个文件夹中，我指向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
  }
]
...

如果你还没有这样做，试着把你的命令放进npm脚本"start"。注意，它是少数几个不需要"run"的命令之一，所以"npm start"会运行这个命令。

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

    npm install webpack -g

下面我使用全局webpack命令(运行文件)，然后告诉npm监视我列出的文件的变化，运行build命令，启动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中再次声明它。我目前没有任何devServer配置在我的webpack。

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

你可以尝试使用下一个变体:

publicPath: production ? '' : '192.168.1.2:3000',

Webpack Dev Server生成非物理哈希包

我从哪里来

这是我的理解(通用开发服务器设置):

Webpack.config.js

相关内容

最新更新

热门标签：