웹팩 파일 로더 옵션을 인식하지 못합니다.

Question

웹팩을 처음 접했을 때 응시자가 나를 빤히 쳐다 보지 만 보지 못했습니다. 아무리 파일을 전달하려고해도 파일 로더 옵션을 찾을 수 없습니다.

파일 로더를 사용하고 있으며 옵션으로 publicPath (또는 처음에는 무엇이든)를 전달하려고합니다. 파일 로더 소스 코드에 들어가서 탐지 된 모든 옵션에 대한 로그를 추가했지만 항상 비어있게되었습니다.

이

loader: "file?name=[name].[ext]&publicPath=https://apps.ixordocs.be/"

처럼 하나의 문자열로 옵션을 추가로 나는 또한뿐만 아니라 loader: "file-loader"

으로 시도했습니다

var path = require('path') 
var webpack = require('webpack') 
var HtmlWebpackPlugin = require('html-webpack-plugin') 


module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'idlink-1.1.1.js', 
    publicPath: '' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.UglifyJsPlugin(), 
    new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'}) 
    ], 
    module: { 
    loaders: [ 
     { 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { presets: ['react', 'es2015', 'stage-1'] } 
     }, 
     {test: /\.css$/, loader: "style-loader!css-loader" }, 
     {test: /\.scss$/, loaders: ["style", "css", "sass"]}, 
     {test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, 
     { 
     test: /\.(jpe?g|png|gif|svg|pdf)$/i, 
     loader: "file", 
     options: { publicPath: 'https://apps.ixordocs.be/'} 
     }, 
     {test: /\.gif$/, loader: "url-loader?mimetype=image/png" } 
    ] 
    }, 
} 

을 webpack.config.prod.js

일부 컨텍스트 정보 : 내 output: {}에 하드 코드 된 publicPath를 정의하고 싶지 않습니다. 내 플러그인이로드 된 div에 배치 된 매개 변수에서 동적으로 가져 오려고합니다.

__webpack_public_path__ 변수를 사용해 보았지만 작동하지 않지만 이미지는 작동하지 않습니다. 공용 경로는 매개 변수 set에서 가져와 청크를 가져 오는 데 사용됩니다. 어떻게 든 그것은 이미지에 아무런 영향을 미치지 않습니다. 출력 아래에 publicPath를 하드 코딩하면 이미지 작업이 수행됩니다. 이로 인해 변수에 대한 로더의 통신에 문제가 있다는 생각이 들기 때문에 옵션이 제대로 작동하고 궁극적으로 거기에 동적 publicPath를 전달하려고합니다.

Answer 1

귀하의 질문은 로더의 GitHub repo 및 webpack docs에있는 로더 설명서를 기반으로 완전히 유효합니다. 문제는 pull request에서 병합되었지만 아직 새 버전의 로더에 출시되지 않은 및 outputPath 기능이며 npm의 README에는 같은 이유로 기능이 언급되지 않습니다.
npm install webpack/file-loader --save-dev으로 GitHub 저장소에서 설치하여이 기능을 계속 사용할 수 있으며 옵션이 작동해야합니다. 그렇지 않으면 options을 query으로 바꾸십시오. 당신은 CDN 또는 다른 서버에서 자산을로드 할 것을 자주 발생하기 때문에 publicPath에 대한

{ 
    test: /\.(jpe?g|png|gif|svg|pdf)$/i, 
    loader: "file-loader", 
    query: { publicPath: 'https://apps.ixordocs.be/'} 
} 

사용하여 URL도 유효합니다.