3

次の出力プロジェクト構造があります。

img
  ...
portfolio
  masttech
    index.html
  index.html
...
index.html

そして、次のソース プロジェクト構造:

components
  ...
  Portfolio
    img
      ...
    Masttech
      img
        ...
      index.js
      template.pug
      style.sass
    index.js
    template.pug
    style.sass
  Index
    img
      ...
    index.js
    template.pug
    style.sass
  layout.pug
index.js

そして、次の webpack 構成:

context: __dirname,
entry: [
  './src/index.js'
],
output: {
  filename: 'main.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/'
},
devServer: {
  publicPath: '/'
},
module: {
  rules: [
    ...
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: 'img/[name].[hash:7].[ext]'
          }
        }
      ]
    }
  ]
},
plugins: [
  ...
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/components/Index/template.pug'
  }),
  new HtmlWebpackPlugin({
    filename: 'portfolio/masttech/index.html',
    template: './src/components/Portfolio/Masttech/template.pug'
  })
]
...

img/...問題は、私の画像のURL がすべてindex.html. から始まる絶対 URL に変更する/と、問題は解決すると思いますが、その方法がわかりません。ローダーの名前オプションの前に を付けると/、画像にまったくアクセスできなくなります。

たとえば、これは私が内部に画像を必要とする方法ですsrc/components/Portfolio/Masttech/template.pug:それを提供している間、ページがフォルダーにある間フォルダーがルートにあるため、出力ディレクトリからアクセスできないようimg(src=require('./img/pic__structure.png') に変換されます。img/pic__structure.7b94b5f.pngimgimgportfolio/masttech

4

1 に答える 1

1

Adding publicPath: '/' to the loader options has solved the problem:

{
  loader: 'url-loader',
  options: {
    limit: 8192,
    name: 'img/[name].[hash:7].[ext]',
    publicPath: '/'
  }
}

Moreover I found out my frustrating fail - in the very end of webpack conf I had another output rule where publicPath wasn't defined, so that it rewrote the right rule with it. As a conclusion, you don't need publicPath: '/' in the loader options if you already have it in output.

于 2018-12-22T11:50:18.473 に答える