我刚刚更新到webpack 3.这是我的配置文件。这是一个简单的webpack文件,主要使用react。
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规则。
答案 0 :(得分:0)
您应该在所有加载程序中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']
},
};