webpack.config.js (4927B)
1 const path = require('path'); 2 3 const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 const VueLoaderPlugin = require('vue-loader/lib/plugin'); 6 const StylelintPlugin = require('stylelint-webpack-plugin'); 7 8 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 9 const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); 10 const RobotstxtPlugin = require('robotstxt-webpack-plugin'); 11 const CopyPlugin = require('copy-webpack-plugin'); 12 13 module.exports = (env, argv) => { 14 const MODE = argv.mode; 15 16 return { 17 entry: './src/main.js', 18 output: { 19 path: path.join(__dirname, 'dist'), 20 filename: '[name].bundle.js', 21 }, 22 resolve: { 23 alias: { 24 '@': path.resolve(__dirname, 'src/'), 25 }, 26 }, 27 optimization: { 28 splitChunks: { 29 chunks: 'all', 30 }, 31 }, 32 devtool: MODE === 'development' ? 'eval-source-map' : 'none', 33 devServer: { 34 contentBase: 'dist', 35 port: 1234, 36 hot: true, 37 historyApiFallback: true, 38 overlay: { 39 errors: true, 40 }, 41 stats: 'errors-warnings', 42 clientLogLevel: 'silent', 43 }, 44 module: { 45 rules: [ 46 { 47 enforce: 'pre', 48 test: /\.(js|vue)$/, 49 exclude: /node_modules/, 50 loader: 'eslint-loader', 51 }, 52 { 53 test: /\.vue$/, 54 loader: 'vue-loader', 55 }, 56 { 57 test: /\.js$/, 58 exclude: /node_modules/, 59 loader: 'babel-loader', 60 }, 61 { 62 test: /\.css$/, 63 use: [ 64 MODE === 'development' 65 ? 'vue-style-loader' 66 : MiniCssExtractPlugin.loader, 67 { 68 loader: 'css-loader', 69 options: { importLoaders: 1 }, 70 }, 71 { 72 loader: 'postcss-loader', 73 options: { 74 config: { 75 ctx: { 76 mode: MODE, 77 }, 78 }, 79 }, 80 }, 81 ], 82 }, 83 { 84 test: /\.(png|jpe?g|gif)$/i, 85 use: [ 86 { 87 loader: 'file-loader', 88 options: { 89 name: 'assets/img/[name].[ext]', 90 esModule: false, 91 }, 92 }, 93 ], 94 }, 95 { 96 test: /\.svg$/, 97 oneOf: [ 98 { 99 resourceQuery: /inline/, 100 use: ['babel-loader', 'vue-svg-loader'], 101 }, 102 { 103 loader: 'file-loader', 104 query: { 105 name: 'assets/[name].[hash:8].[ext]', 106 }, 107 }, 108 ], 109 }, 110 ], 111 }, 112 plugins: [ 113 new VueLoaderPlugin(), 114 new HtmlWebpackPlugin({ 115 template: './public/index.html', 116 }), 117 new MiniCssExtractPlugin(), 118 new StylelintPlugin({ files: ['src/**/*.{vue,scss,css}'] }), 119 new FaviconsWebpackPlugin({ 120 logo: './src/assets/img/favicon.svg', 121 mode: 'webapp', 122 devMode: 'webapp', 123 favicons: { 124 appName: 'Squircley', 125 appDescription: 126 'Create and export beautiful SVG squircles to use in your designs', 127 developerName: 'George Francis', 128 developerURL: null, 129 background: '#fff', 130 theme_color: '#333', 131 icons: { 132 coast: false, 133 yandex: false, 134 }, 135 }, 136 }), 137 new CopyPlugin({ 138 patterns: [{ from: './public/og-image.png', to: '' }], 139 }), 140 new RobotstxtPlugin({ 141 sitemap: 'https://squircley.app/sitemap.xml', 142 }), 143 new CleanWebpackPlugin(), 144 ], 145 }; 146 };