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'], }, output: { filename: isProd ? '[name].[contenthash].bundle.js' : '[name].bundle.js', path: resolvePath('public', 'assets'), publicPath: '/assets/', }, devtool: isProd ? 'source-map' : '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-loader', ], } ], }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: isProd ? '[name].[contenthash].bundle.css' : '[name].bundle.css', }), new webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false, }), new ManifestPlugin({ writeToFileEmit: true, }), ], };