升級到webpack3，現在我得到一個錯誤

Question

我剛剛更新到webpack 3.這是我的配置文件。這是一個簡單的使用主要反應的webpack文件。

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './index.jsx', 
    context: path.resolve('src'), 
    output: { 
     path: path.resolve('build'), 
     filename: 'bundle.js', 
     publicPath: '/public/assets', 
    }, 
    devServer: { 
     historyApiFallback: { 
      index: 'index.html' 
     }, 
    }, 
    module: { 
     rules: [ 
      { 
       test: [/\.es6?$/, /\.jsx?/], 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react', 'stage-2'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       // eslint-disable-next-line max-len 
       loader: ExtractTextPlugin.extract('style', '!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!sass?sourceMap') 
      }, 
      { 
       test: /\.svg$/, 
       loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('styles.css') 
    ], 
    watch: false, 
    resolve: { 
     extensions: ['.js', '.jsx', '.json', '.es6', '.scss'] 
    }, 
}; 

現在我得到以下錯誤

拋出新的錯誤（「模塊「」 + loader.path +「」不是裝載機（必須有正常或俯仰功能）」）;

我該如何解決這個問題。我認爲它導致這個問題的.svg規則。

Answer 1

你應該在所有裝載機loader（因爲的WebPack> 2刪除自動解決-loader模塊名稱https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed）的

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './index.jsx', 
    context: path.resolve('src'), 
    output: { 
     path: path.resolve('build'), 
     filename: 'bundle.js', 
     publicPath: '/public/assets', 
    }, 
    devServer: { 
     historyApiFallback: { 
      index: 'index.html' 
     }, 
    }, 
    module: { 
     rules: [ 
      { 
       test: [/\.es6?$/, /\.jsx?/], 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react', 'stage-2'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       // eslint-disable-next-line max-len 
       loader: ExtractTextPlugin.extract('style-loader', '!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!sass-loader?sourceMap') 
      }, 
      { 
       test: /\.svg$/, 
       loader: 'url-loader?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('styles.css') 
    ], 
    watch: false, 
    resolve: { 
     extensions: ['.js', '.jsx', '.json', '.es6', '.scss'] 
    }, 
};