无效的选项对象。 CSS Loader已使用与API模式不匹配的选项对象进行了初始化。 -选项的未知属性“最小化”。
当我运行npm run build时,在vue应用程序中出现此错误。它可以在dev上正常工作,并且在我不使用某些插件(例如:“ vue-bootstrap-typeahead”)时可以构建
Webpack.config.js:
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
filename: "build.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"],
},
{ test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, loader: "file-loader" },
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {},
// other vue-loader options go here
},
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]",
},
},
],
},
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
extensions: ["*", ".js", ".vue", ".json"],
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
},
performance: {
hints: false,
},
devtool: "#eval-source-map",
};
if (process.env.NODE_ENV === "production") {
module.exports.devtool = "#source-map";
// http://vue-loader.vuejs.org/en/workflow/production.html
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports.optimization = {
minimizer: [
// new UglifyJsPlugin(),
new OptimizeCSSAssetsPlugin({}),
],
};
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: '"production"',
},
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
]);
}
package.json:
{
"description": "A Vue.js project",
"version": "1.0.0",
"author": "saruwman <sarahammouzou@gmail.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"es6-promise": "^4.2.8",
"jquery": "^3.5.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"owl.carousel": "^2.3.4",
"popper.js": "^1.16.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"vee-validate": "^2.2.15",
"vue": "^2.5.11",
"vue-axios": "^2.1.5",
"vue-bootstrap-typeahead": "^0.2.6",
"vue-i18n": "^8.21.0",
"vue-multiselect": "^2.1.6",
"vue-simple-alert": "^1.1.1",
"vue-toasted": "^1.1.28",
"vue2-google-maps": "^0.10.7",
"vuex": "^3.5.1",
"vuex-persistedstate": "^3.1.0",
"vuex-router-sync": "^5.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"cross-env": "^5.0.5",
"css-loader": "^4.3.0",
"eslint": "^7.5.0",
"eslint-config-wordpress": "^2.0.0",
"eslint-plugin-vue": "^6.2.2",
"file-loader": "^1.1.4",
"owl-carousel": "^1.0.0",
"postcss-loader": "^4.0.4",
"prettier": "^1.12.1",
"vue-loader": "^14.2.4",
"vue-router": "^3.3.4",
"vue-template-compiler": "^2.4.4",
"webpack": "^4.44.0",
"webpack-cli": "3.3.12",
"webpack-dev-server": "^3.11.0"
},
"eslintConfig": {
"extends": [
"eslint:recommended",
"wordpress",
"plugin:vue/recommended"
]
}
}