Skip to content

Instantly share code, notes, and snippets.

@M-Porter

M-Porter/vue3-webpack.config.js

Last active January 22, 2023 02:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save M-Porter/b2d2649f4c88c795616aad45375eff1b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save M-Porter/b2d2649f4c88c795616aad45375eff1b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. M-Porter revised this gist Oct 22, 2020. 1 changed file with 2 additions and 8 deletions.
    10 changes: 2 additions & 8 deletions vue3-webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ module.exports = {
    import: './frontend/main.js',
    dependOn: 'vendor',
    },
    vendor: ['vue'], // optional if you want to code split vue out
    vendor: ['vue'],
    },

    output: {
    @@ -23,12 +23,6 @@ module.exports = {
    publicPath: '/assets/',
    },

    optimization: {
    splitChunks: {
    chunks: 'all',
    },
    },

    devtool: isProd ? 'source-map' : 'cheap-module-source-map',

    resolve: {
    @@ -74,7 +68,7 @@ module.exports = {
    plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
    filename: '[name].css',
    filename: isProd ? '[name].[contenthash].bundle.css' : '[name].bundle.css',
    }),
    new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true,
  2. M-Porter revised this gist Oct 22, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions vue3-webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,7 @@ module.exports = {
    },
    },

    devtool: isProd ? 'source-map' : 'eval-cheap-module-source-map',
    devtool: isProd ? 'source-map' : 'cheap-module-source-map',

    resolve: {
    alias: {
    @@ -65,7 +65,7 @@ module.exports = {
    loader: 'css-loader',
    options: { importLoaders: 1 },
    },
    'postcss-loaders',
    'postcss-loader',
    ],
    }
    ],
  3. M-Porter revised this gist Oct 22, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion vue3-webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ module.exports = {
    import: './frontend/main.js',
    dependOn: 'vendor',
    },
    vendor: ['vue', 'axios', 'qrcode'],
    vendor: ['vue'], // optional if you want to code split vue out
    },

    output: {
  4. M-Porter created this gist Oct 22, 2020.
    87 changes: 87 additions & 0 deletions vue3-webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    const path = require('path');
    const webpack = require('webpack');
    const VueLoaderPlugin = require('vue-loader/dist/plugin').default;
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const ManifestPlugin = require('webpack-manifest-plugin');

    const isProd = process.env.NODE_ENV === 'production';

    const resolvePath = (...args) => path.resolve(path.join(__dirname, ...args));

    module.exports = {
    entry: {
    main: {
    import: './frontend/main.js',
    dependOn: 'vendor',
    },
    vendor: ['vue', 'axios', 'qrcode'],
    },

    output: {
    filename: isProd ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
    path: resolvePath('public', 'assets'),
    publicPath: '/assets/',
    },

    optimization: {
    splitChunks: {
    chunks: 'all',
    },
    },

    devtool: isProd ? 'source-map' : 'eval-cheap-module-source-map',

    resolve: {
    alias: {
    '@': resolvePath('frontend'),
    'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
    },
    extensions: [
    '.js',
    '.json',
    '.vue',
    ],
    },

    module: {
    rules: [
    {
    test: /\.vue$/,
    loader: 'vue-loader',
    },
    {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: file => (
    /node_modules/.test(file) &&
    !/\.vue\.js/.test(file)
    )
    },
    {
    test: /\.css$/,
    use: [
    isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    {
    loader: 'css-loader',
    options: { importLoaders: 1 },
    },
    'postcss-loaders',
    ],
    }
    ],
    },

    plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
    filename: '[name].css',
    }),
    new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false,
    }),
    new ManifestPlugin({
    writeToFileEmit: true,
    }),
    ],
    };