I have developed a VUE SPA that employs Vuetify as UI. The starting project was scaffolded using vue-cli and selecting all standard options. My current vue.config.js file is as follow:
const path = require("path");
const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
publicPath: process.env.NODE_ENV == "production" ? "/" : "/",
css: {
sourceMap: true
},
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
https: true
}
},
productionSourceMap: false,
transpileDependencies: [
"vuetify",
"vue2-dropzone",
"vue-echarts",
"resize-detector"
],
configureWebpack: {
devtool: "source-map",
resolve: {
alias: {
//Api: path.resolve(__dirname, "src/api/"),
Components: path.resolve(__dirname, "src/components/"),
Constants: path.resolve(__dirname, "src/constants/"),
Container: path.resolve(__dirname, "src/container/"),
Views: path.resolve(__dirname, "src/views/"),
Helpers: path.resolve(__dirname, "src/helpers/"),
Themes: path.resolve(__dirname, "src/themes/")
//moment: "moment/src/moment"
},
extensions: ["*", ".js", ".vue", ".json"]
},
plugins: [
//jquery plugin
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
jQuery: "jquery"
}),
new BundleAnalyzerPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
optimization: {
splitChunks: {
chunks: "all"
// minSize: 10000,
// maxSize: 200000
}
}
}
};
I would like to add webpack optimization for minifying css/sass, images, js code, woff2 font files (served locally and not from CDN), I suppose that this is not done automatically, am I wrong? Could you share a basic configuration to achieve what described above (being able to debug code in development)?