升级到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'] 
    }, 
};