webpack 1 파일 로더 상대 파일 경로

Question

다른 디렉토리에 js, 이미지, 글꼴, CSS를 출력해야합니다. 웹팩 그에 따라 구성되고 배포 디렉토리에 올바른 디렉토리에 파일을 배치 :

/dist 
/dist/images 
/dist/css 
/dist/js 
/dist/fonts 

나는 또한 CSS 파일을 추출했고, 그 이유로, 나는 알 그 장소에 사용되는 파일 로더 옵션 올바른 디렉토리에 글꼴 및 이미지가 올바른 URL을 생성하지 않아 파일이 웹 브라우저에로드되지 않습니다.

http://foobar.com/assets/css/main.css 
http://foobar.com/assets/css/assets/images/foobar.png 

예상

http://foobar.com/assets/images/foobar.png 

웹팩 설정 파일은 다음과 같습니다

var path = require("path"); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var config = require('./config'); 
var CompressionPlugin = require("compression-webpack-plugin"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: [ 
     './src/js/index.js' 
    ], 
    output: { 
     path: __dirname + '/dist', 
     filename: 'assets/js/bundle-[hash].js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] }, 
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') }, 
      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=fonts' }, 
      { test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=images/'} 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("assets/css/[name].css"), 
     new HtmlWebpackPlugin({ 
      inject: true, 
      template: __dirname + '/src/' + 'index.html', 
      filename: 'index.html' 
     }), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production'), 
       'PORT_NODE_SERVER': config.port.node_server_prod_port 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       warnings: true 
      } 
     }), 
     new webpack.optimize.AggressiveMergingPlugin(), 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      mangle: true, 
      compress: { 
       warnings: false, // Suppress uglification warnings 
       pure_getters: true, 
       unsafe: true, 
       unsafe_comps: true, 
       screw_ie8: true 
      }, 
      output: { 
       comments: false, 
      }, 
      exclude: [/\.min\.js$/gi] // skip pre-minified libs 
     }), 
     new CompressionPlugin({ 
      asset: "[path].gz[query]", 
      algorithm: "gzip", 
      test: /\.js$|\.css$|\.html$/, 
      threshold: 10240, 
      minRatio: 0.8 
     }) 
    ] 
}; 

Answer 1

내가 해결책을 발견했다. /myapp 소개

var path = require("path"); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var config = require('./config'); 
var CompressionPlugin = require("compression-webpack-plugin"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: [ 
     './src/js/index.js' 
    ], 
    output: { 
     path: __dirname + '/dist', 
     filename: 'js/bundle-[hash].js', 
     publicPath: '/myapp/assets' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] }, 
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') }, 
      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=/fonts/[name].[ext]' }, 
      { test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=/images/[name].[ext]'} 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("css/[name]-[hash].min.css"), 
     new HtmlWebpackPlugin({ 
      inject: true, 
      template: __dirname + '/src/' + 'index.html', 
      filename: 'index.html' 
     }), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production'), 
       'PORT_NODE_SERVER': config.port.node_server_prod_port 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       warnings: true 
      } 
     }), 
     new webpack.optimize.AggressiveMergingPlugin(), 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      mangle: true, 
      compress: { 
       warnings: false, // Suppress uglification warnings 
       pure_getters: true, 
       unsafe: true, 
       unsafe_comps: true, 
       screw_ie8: true 
      }, 
      output: { 
       comments: false, 
      }, 
      exclude: [/\.min\.js$/gi] // skip pre-minified libs 
     }), 
     new CompressionPlugin({ 
      asset: "[path].gz[query]", 
      algorithm: "gzip", 
      test: /\.js$|\.css$|\.html$/, 
      threshold: 10240, 
      minRatio: 0.8 
     }) 
    ] 
}; 

는 http://foobar.com/myapp에 있고 그럼 http://foobar.com/myapp/assets/js/bundle-438348934.js과 : 웹팩 (V1) 전체 기본 경로가 필요하다는 이유로, 따라가,이 문제를 해결 할 수 있도록 기본 경로에 대한 힌트를 필요로하는 것 http://foobar.com/myapp/assets/fonts/myfont.woff

희망이 도움이되었습니다.