Javascript 带有Vue CLI的网页包不';依赖项更新后无法工作
这是我的Javascript 带有Vue CLI的网页包不';依赖项更新后无法工作,javascript,vue.js,webpack,Javascript,Vue.js,Webpack,这是我的package.json { "name": "x", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "dev": "webpack --mode=development --w
package.json
{
"name": "x",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack --mode=development --watch",
"build": "webpack --mode=production"
},
"dependencies": {
"axios": "^0.21.0",
"vue-axios": "^3.2.0",
"vuex": "^3.6.2"
},
"devDependencies": {
"@types/node": "^14.14.37",
"css-loader": "^5.2.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^5.3.1",
"remove-files-webpack-plugin": "^1.1.3",
"sass": "^1.20.3",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.1.0",
"typescript": "^4.2.3",
"url-loader": "^4.1.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0"
}
}
这是我的webpack.config.js
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const RemovePlugin = require('remove-files-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
module.exports = (env, argv) => ({
// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: './src/ui.js', // The entry point for your UI code
code: './src/code.js' // The entry point for your plugin code
},
module: {
rules: [
// Converts TypeScript code to JavaScript
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
// Enables including CSS by doing "import './file.css'" in your TypeScript code
{ test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
{ test: /\.(png|jpg|gif|webp|svg)$/, loader: [{ loader: 'url-loader' }] }
]
},
// Webpack tries these extensions for you if you omit the extension like "import './file'"
resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist') // Compile into a folder called "dist"
},
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
plugins:
argv.mode === 'production'
? [
new VueLoaderPlugin(),
new RemovePlugin({
after: { include: ['dist/ui.js'] }
}),
new HtmlWebpackPlugin({
template: './src/ui.html',
filename: 'ui.html',
inlineSource: '.(js|css|scss)$',
chunks: ['ui']
}),
new HtmlWebpackInlineSourcePlugin()
]
: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/ui.html',
filename: 'ui.html',
inlineSource: '.(js|css|scss)$',
chunks: ['ui']
}),
new HtmlWebpackInlineSourcePlugin()
]
});
在更新依赖项之后,一切都崩溃了,我得到了错误消息,我不理解,因为加载程序是一个字符串。我对网页包的了解非常有限。有人能帮忙吗?换衣服
{test://\(png | jpg | gif | webp | svg)$/,加载器:[{loader:'url loader'}]}
到
{test://\(png | jpg | gif | webp | svg)$/,使用:[{loader:'url loader'}]}
你需要在任何地方都这样做(显然):
{test://\.css$/,loader:[{loader:'style loader'},{loader:'css loader'}]},
-->
{test://\.css$/,use:[{loader:'style loader'},{loader:'css loader'}]},
那么你是认真地问标题中的“依赖项更新后”问题,而不告诉你到底更新了哪些依赖项?这就是我发布package.json的原因。我已经运行了Thread upgrade--latestIf错误是“在依赖项更新之后”,您需要在之前和之后发布版本-而不仅仅是在之后…现在我看到一个新的错误*configuration.module.rules[1]。加载程序应该是一个非空字符串。
这些更改很有帮助!
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[4] should be one of these:
["..." | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }, ...]
-> A rule.
Details:
* configuration.module.rules[4].loader should be a non-empty string.
-> A loader request.