Я застрял в этом вопросе в течение нескольких дней. Это началось, когда я пытался использовать пакет Uppload-Vue , но продолжал получать сообщение об ошибке:
![You may need an appropriate loader error](https://i.stack.imgur.com/aecFx.png)
Я начал копаться в их коде и понял, что они используют Babel 7, а я все еще использую 6, поэтому я решил, что могу попробовать обновить. Используя инструмент обновления babel, я перешел на Babel 7 и исправил несколько других несвязанных ошибок, но теперь я наконец вернулся к тому, с чего начал с той же самой первоначальной ошибкой!
Мой вопрос: это проблема с их пакетом? Или мой веб-пакет настроен неправильно?
webpack.config.js:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.vue'],
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
exclude: /(node_modules)/,
},
{
test: /\.js?$/,
use: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
},
{
test: /\.(s*)css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
},
],
},
plugins: [
new VueLoaderPlugin(),
new Dotenv(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
devServer: {
historyApiFallback: true,
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:3000',
}),
},
}
.babelrc:
{
"presets": [
"@babel/preset-env"
],
"plugins": [
[
"babel-plugin-root-import",
{
"rootPathSuffix": "src/",
"rootPathPrefix": "~"
}
],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-proposal-function-bind"
]
}