web-dev-qa-db-ja.com

WebpackファイルローダーpublicPath

Webpack3.10.0とファイルローダー1.1.6を使用していくつかの画像とjsonファイルを配布フォルダーに移動するreactプロジェクトがあります。

Webpackは期待どおりにファイルを出力しますが、reactはjsonおよびimagesアセットに対して間違ったURLを受け取ります

私のマークアップは次のようになります。

<img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
alt="Hello World!!">

しかし、次のようにする必要があります。

<img src="/assets/images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
alt="Hello World!!">

私のフォルダ構造は次のようになります：C:. ├───dist │ └───assets │ ├───css │ ├───data │ ├───images │ └───js ├───src │ ├───css │ ├───data │ ├───images │ └───js │ ├───actions │ ├───components │ ├───containers │ └───reducers └───tests

ファイルローダーのpublicPathでこれを処理する必要があると思いましたが、誤解しているか、構成に問題があるようです。誰かが私を助けてくれるほど親切にできますか？

webpack.config.js

var path = require('path');
const ExtractCSS = require("extract-text-webpack-plugin");

module.exports = {
  entry: [
    './src/js/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist/assets/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env','react']
          }
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractCSS.extract('css-loader!sass-loader')
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name (file) {
                /*if (env === 'development') {
                  return '[path][name].[ext]'
              }*/
                return '[name]_[hash].[ext]'
              },
              publicPath: '/assets/images/',
              outputPath: '../images/'
            }  
          }
        ]
      },
      {
        test: /\.json$/,

        use: [
          {
            loader: 'file-loader',
            options: {
              name (file) {
                /*if (env === 'development') {
                  return '[path][name].[ext]'
              }*/
                return '[name].[ext]'
              },
              publicPath: '/assets/data/',
              outputPath: '../data/'
            }  
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractCSS('../css/app.css', {
        allChunks: true
    }) 
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  //devtool: 'eval-source-map',
  devServer: {
    historyApiFallback: true,
    contentBase: './dist/'
  }
};
reactjswebpackwebpack-file-loader
4
Mark Priem

今朝、マシンが再起動した後、問題が変わりましたか？!!？ （キャッシュの問題??！）... publicPathを無視する代わりに、publicPathをoutputPathと連結するようになりました。ここで説明されているのと同じ問題： https://github.com/webpack-contrib/file-loader/issues/228

0.10.1に戻すと、問題が解決します。

助けてくれたみんなに感謝します！

0
Mark Priem

だから、代わりに

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name (file) {
            /*if (env === 'development') {
              return '[path][name].[ext]'
          }*/
            return '[name]_[hash].[ext]'
          },
          publicPath: '/assets/images/',
          outputPath: '../images/'
        }  
      }
    ]
  },

あなたは次のようなことを試すことができます

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name (file) {
            /*if (env === 'development') {
              return '[path][name].[ext]'
          }*/
            return '[name]_[hash].[ext]'
          },
          publicPath: function(url) {
              return url.replace(../, '/assets/')
          },
        }  
      }
    ]
  },
2
mu_sa

出力オブジェクトを1つ上のレベルに構成してから、ファイルの名前のみを指定することもできます。

  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'js/bundle.js'
  },

そして、例えば、jsonの場合：

{
    test: /\.json$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: 'data/[name].[ext]',
            }
      }
    ]
}
1
ChrisR