(이하) 미세에 의해이 일을 :웹팩 파일 로더와 이미지 내 스타일 시트에서 나는 이미지를 사용하고 CSS
.foo { background: url('../images/foo.png') }
그들은 내가 약 괜찮아 스타일 시트에 base64로 인코딩있어 HMR을 사용하여 . 그러나 프로덕션을 위해 컴파일 할 때 스타일 시트에 이미지를 포함하지 않기를 바란다. 나는 url-loader과 file-loader을 시도했다.
URL 로더를 사용하면 이미지를 올바르게 출력하지 못했습니다. 제한을 설정하지 않으면 파일이 output/images/으로 내보내지고 올바른 크기를 가졌지 만 유효한 이미지가 아닙니다. 한계를 8k보다 작은 값으로 설정하면 이미지는 output으로 방출되고 올바르게 수정됩니다.
url(data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhMDdjZWVkMGRiZTNlMjk5ODY5NWQ3ZjM4MzYxZDY1Zi5wbmciOw==);
을 어느 당신이이 해독 할 때 : (limit=1에 URL 로더를 사용하는 경우 예)
module.exports = __webpack_public_path__ + "a07ceed0dbe3e2998695d7f38361d65f.png";
값을 Base64로 인코딩하지 않고 URL을 사용하도록 CSS를 가져 오려면 어떻게해야합니까?
이
내 웹팩입니다 (아직 웹팩 1) 로우더 설정 :{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css!postcss'),
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css!less!postcss'),
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?name=/images/[name].[ext]'
}
업데이트 :는 less-loader를 해제하는 것은 (URL을 로더를 사용하는 경우 인코딩되는 URL을 중지하지만 이미지가 밝혀 여전히 유효하지는 않지만 파일 로더를 사용할 때는 그렇지 않습니다.
업데이트 2 : 추가 css!less!postcss 로더의 끝에 사용자 정의 로더와 소스는 여전히 ../images/foo.png의 이미지 URL이 때문에이 문제가 선 아래로 더있다가 나타납니다있다. 또한 ExtractTextPlugin을 제거하려고 시도했지만 이미지 용으로 컴파일 된 JS에 CSS와 같은 내보내기 용 Base64 인코딩 값이 있습니다. 내가 처음 분리 한 CSS 파일을 사용하지 않는