web-dev-qa-db-ja.com

webpack以外のコンテンツは/ fooから提供されます

私はこのサーバーを起動できません。 webpack-dev-server docs を読みます。

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

サンプルコードはシンプルに見えますが、このサーバーを正常に起動できません。何を試しても、異なるフォルダー、contentを取得できません!!!何か足りない？

どんな助けでも大歓迎です。

出力：

Project is running at http://0.0.0.0:8080/
webpack output is served from /assets/
Content not from webpack is served from ~/WebstormProjects/react_back/assets/

私のプロジェクト構造：

├── [drwxr-xr-x ]  src
│   └── [-rw-r--r-- ]  index.js
├── [drwxr-xr-x ]  public
│   ├── [-rw-r--r-- ]  index.html
│   ├── [drwxr-xr-x ]  assets
│   │   └── [-rw-r--r-- ]  bundle.js
│   └── [-rw-r--r-- ]  favicon.ico
├── [-rw-r--r-- ]  package.json
├── [-rw-r--r-- ]  npm-debug.log
├── [-rw-r--r-- ]  webpack.config.js

package.json

  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval"
  },

webpack.config.js

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/public",
        publicPath: "/assets/",
        filename: "assets/bundle.js",
        chunkFilename: '[name].js'
    },
    devServer: {
        contentBase: __dirname + "/assets/",
        inline: true,
        Host: '0.0.0.0',
        port: 8080,
    },
    module: {
        loaders: [
            {
                test: /\.(jpg|jpeg|gif|png|ico)$/,
                exclude: /node_modules/,
                loader: 'file-loader?name=[name].[ext]'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ["es2016", "react", "env", "stage-2"]
                }
            }
        ]
    }
};

バージョン：

➜  node -v
v7.6.0
➜  webpack-dev-server -v
webpack-dev-server 2.4.1
webpack 2.2.1
reactjswebpackwebpack-dev-server
10
McGrady

最初の問題は、assets/からコンテンツを提供しているが、そのディレクトリがなく、public/assets/があり、index.htmlがpublic/。したがって、本当に必要なのは、contentBaseをpublic/に設定することです。

devServer: {
    contentBase: __dirname + "/public/",
    inline: true,
    Host: '0.0.0.0',
    port: 8080,
},

これで、webpack-dev-serverが正しいバンドルを提供しないという問題が引き続き発生します。うまくいくかもしれませんが、実際のファイルシステムにバンドルがあり、webpack-dev-serverがメモリから提供するバンドルの代わりに使用されます。その理由は、webpack-dev-serverは、正しいパスがヒットした場合にのみメモリから提供されるためです。 assets/bundle.jsをindex.htmlに含めると、パスと一致しますが、publicPath: "/assets/"を設定しているため、/assets/が検索され、ファイル名が追加されますこれに（assets/bundle.jsです。実際には、バンドルは/assets/assets/bundle.jsから提供されます。

これを修正するには、publicPathオプションを削除します（publicPath: "/"を設定しても同じ効果があります）。

output: {
    path: __dirname + "/public",
    filename: "assets/bundle.js",
    chunkFilename: '[name].js'
},

または、出力パスを/public/assets/に変更し、ファイル名をbundle.jsに変更することもできます。これにより、チャンクがアセットディレクトリに移動します。これはおそらく、とにかく必要なものです。

output: {
    path: __dirname + "/public/assets/",
    publicPath: "/assets/",
    filename: "bundle.js",
    chunkFilename: '[name].js'
},

注：publicPathは、アセットのURLを変更する一部のローダーに影響します。

22
Michael Jungo