Webpack에서 자산 URL (스타일러스)을 다시 쓰지 않음

Question

특정 경로 (~assets/myimage.png)에서 올바른 경로 (내 경우 /assets/)로 자산 경로를 다시 쓰려고합니다.

모든 이미지를 공개 폴더에 쓰도록 내 웹 팩에 명령했습니다. 이미지가 올바르게 작성되었지만 빌드 CSS의 URL은 적절하게 조정되지 않습니다.

:

이

내가 올바른 디렉토리로 확인 자산

{ 
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 
    loader: require.resolve("url-loader"), 
    options: { 
     limit: 100, 
     name: "static/media/[name].[hash:8].[ext]" 
    } 
}, 

내 별명 사용하고 내 스타일러스 파일

use: ExtractTextPlugin.extract({ 
    fallback: { 
    loader: require.resolve("style-loader"), 
    options: { 
     hmr: false 
    } 
    }, 
    use: [ 
    { 
     loader: require.resolve("css-loader") 
    }, 
    { 
     loader: require.resolve("stylus-loader") 
    } 
    ] 
}) 

과 하나 사용하고있는 규칙입니다

assets: path.resolve(__dirname, "../public") 

이고 공용 경로는 /assets/

publicPath: publicPath + "assets/", 

ExtractTextPlugin을 사용하기 때문에 스타일 로더를 사용할 수 없습니다. 스타일 로더를 사용하는 경우에만 작동하지만, 내 경우에는 CSS 파일이 필요합니다. /style.css

이것에 대한 아이디어가 있으십니까?

Answer 1

이미지에 file-loader을 사용하십시오.

test: /\.(png|jpg|gif)$/, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: {} 
      } 
     ] 
     } 
    ] 

Answer 2

file-loader/url-loader에 CSS를 통과하기 전에 해결 상대 자산 URL을해야 할 수도 있습니다.

나는 stylus-loader 사용되지 않습니다,하지만 난 resolve-url-loader을 다른 CSS 전처리로하려고 접근을 시도하고 사용합니다 :

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test : /\.css$/, 
     loaders: ['style-loader', 'css-loader', 'resolve-url-loader'] 
     }, { 
     test : /\.styl$/, 
     loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'stylus-loader?sourceMap'] 
     } 
    ] 
    } 
}; 

Answer 3

그냥 생각하지만 당신의 별명이 잘못 될 수 있는가? 당신은

assets: path.resolve(__dirname, "../public") 

을 썼다 그러나 당신의 프로젝트 구조는 그것이 있어야이

--project_root/ 
|--public 
|--src 
|--webpack.conf.js 

과 같이 보이는 것을 관한

assets: path.resolve(__dirname, "public") //without the "folder up" operator