How configure webpack optimization options in VUE

Viewed 1186

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)?

0 Answers
Related