webpackはフォントファイルをコピーしません

Question

私のvue2アプリケーションのwebpack設定を設定しようとしています。また、sassからCSSを作成する必要があります。だから私はlaravelのミックスプラグインを見て自分のwebpack設定を作成する。それが正常に動作しますが、私は私のSASSファイル（@import "~font-awesome/scss/font-awesome";）で素晴らしいフォント含まれている場合、私はこのエラーを取得する：

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in '[PATH]\client\styles' 

のWebPACKは自動的にlaravelミックスのような[PATH]\client\fonts\にFAフォントファイルをコピーする必要があります。私は多くのソリューションを試しましたが、誰も働いていませんでした。

const path = require('path'), 
    webpack = require('webpack'), 
    ExtractTextPlugin = require("extract-text-webpack-plugin"), 
    FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin"), 
    postCssOptions = [require('autoprefixer')]; 

module.exports = { 
    entry: { 
     'main': [ 
      './client/scripts/main.js', 
      './client/styles/main.scss' 
     ] 
    }, 
    output: { 
     path: path.resolve(__dirname, 'public'), 
     publicPath: './', 
     filename: 'js/[name].js' 
    }, 
    resolve: { 
     extensions: [ '*', '.js', '.vue' ], 
     alias: { 
      'vue$': 'vue/dist/vue.common.js', 
      'vue-router$': 'vue-router/dist/vue-router.common.js' 
     } 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.vue$/, 
       loader: 'vue-loader', 
       options: { 
        loaders: { 
         js: 'babel-loader?presets[]=es2015', 
         scss: ExtractTextPlugin.extract({ 
          use: 'css-loader!sass-loader', 
          fallback: 'vue-style-loader' 
         }), 
         sass: ExtractTextPlugin.extract({ 
          use: 'css-loader!sass-loader?indentedSyntax', 
          fallback: 'vue-style-loader' 
         }), 
         css: ExtractTextPlugin.extract({ 
          use: 'css-loader', 
          fallback: 'vue-style-loader' 
         }), 
         postcss: postCssOptions 
        } 
       } 
      }, 

      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ 
        use: 'css-loader', 
        fallback: 'style-loader' 
       }) 
      }, 

      { 
       test: /\.s[ac]ss$/, 
       loader: ExtractTextPlugin.extract({ 
        use: 'css-loader!sass-loader', 
        fallback: 'style-loader' 
       }) 
      }, 

      { 
       test: /\.html$/, 
       loaders: ['html-loader'] 
      }, 

      { 
       test: /\.(png|jpe?g|gif)$/, 
       loader: 'file-loader', 
       options: { 
        name: 'images/[name].[ext]?[hash]' 
       } 
      }, 

      { 
       test: /\.(woff2?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'file-loader', 
       options: { 
        name: 'fonts/[name].[ext]?[hash]' 
       } 
      } 
     ] 
    }, 
    devtool: '#source-map', 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: "./css/[name].css", 
      allChunks: true 
     }), 
     new FriendlyErrorsWebpackPlugin ({ 
      shouldClearConsole: true 
     }), 
     new webpack.LoaderOptionsPlugin({ 
      minimize: isProduction, 
      options: { 
       postcss: postCssOptions, 
       context: __dirname, 
       output: { path: './' } 
      } 
     }) 
    ] 
} 

Answer 1

は、今私はSASS/SCSSファイルのローダーにresolve-url-loader、 を使用して、それを解決したので、私は持っている：

  { 
       test: /\.s[ac]ss$/, 
       loader: ExtractTextPlugin.extract({ 
        use: 'css-loader!resolve-url-loader!sass-loader?sourceMap', 
        fallback: 'style-loader' 
       }) 
      }, 

      { 
       test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'file-loader', 
       options: { 
        name: 'fonts/[name].[ext]?[hash]', 
        publicPath: '/' 
       } 
      } 

はSASSローダーhttps://www.npmjs.com/package/resolve-url-loader

Answer 2

ファイルのこれらのタイプを処理するためのurl-ローダーを使用してください： 私webpack.config.jsは次のようになります。 https://github.com/webpack-contrib/url-loader