问题

Question

我来自哪里

我一直在使用webpack已经有一段时间了，但这是我第一次没有为它修改入门套件，试图从头开始设置所有内容。

我跟着this nice article on survivejs.com并继承了其中描述的一些方法，将它们与我之前的一些设置相结合（比如根据发送的生产变量设置不同的名称和路径）。

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

然后在摆弄关于excluding unused css from third party frameworks 的章节的某个时刻，我以某种方式破坏了我的开发服务器设置。 （"run build"仍有效！）

问题

我的热服务器定义为192.168.1.2:3000（这就是我想要的）。当我使用下面显示的设置运行webpack-dev-server时，我会在该位置获得 404（无法获取/）。现在我已经阅读很多关于如何正确设置webpack dev服务器但是我仍然没有把它弄好......（很可能不是一个人在这里......），因为我仍然不完全理解这些路径是如何运作的。

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

（如果我错了，请帮助我）

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

这些是让我很难理解的一些要点。我试过了lots。 of。 different。 combinations使用publicPath和contentBase设置，无需重新建立我的开发服务器（先运行正常）。 请注意，我没有遇到任何代码问题或使用run build编译我的版本，这样可以正常工作。

CONFIGS

文件夹结构

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查看我列出的更改文件，运行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中再次声明它。我目前在我的webpack.config文件中没有任何devServer配置，所有内容仍然可以通过npm完美运行。

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

Answer 2

您可以尝试使用下一个变体：

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

Webpack Dev Server生成带有哈希的捆绑包

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

我来自哪里

问题

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

CONFIGS

文件夹结构

Webpack.config.js

2 个答案: