Export 2 webpack config const

Question

I'm trying to build a webpack file, the problem came when I needed to add the 'node' target because it was causing problems with an 'fs' function reading some files. Then I divided my config into web and node. But I'm not complitely sure if I'm doing it right.

I'm currently trying to separate those webpack config.

My webpack.config.js:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

var path = require('path');

const webConfig = {
    entry: './src/main.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.css','.jpg','.png'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': path.resolve(__dirname, './src/'),
        }
    },
    module: {
        rules: [
            { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
            { test: /\.png/,   loader: "url-loader?limit=100000&mimetype=image/png" },
            { test: /\.gif/,   loader: "url-loader?limit=100000&mimetype=image/gif" },
            { test: /\.jpg/,   loader: "file-loader" },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            { test: /\.css$/, use: ['vue-style-loader','css-loader']} 
        ]
  }
}
const nodeConfig = {
  entry: './src/main.js',
  mode: 'development',
  output: {
      path: path.resolve(__dirname, './dist/'),
      filename: 'bundle.node.js'
  },
  resolve: {
      extensions: ['.js', '.vue','.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, './src/'),
      }
  },
  target: 'node',
  node: { fs: 'empty' },
  module: {
      rules: [
          { test: /\.vue$/,  loader: 'vue-loader' },
          { test: /\.js$/,   loader: 'babel-loader' },
          { test: /\.css$/, use: ['vue-style-loader','css-loader']} 
          // this will apply to both plain `.css` files
          // AND `<style>` blocks in `.vue` files
      ]
},
plugins: [
  new VueLoaderPlugin()
]
}

But I have these errors. The first one is having problems with js files even if I'm not event taking them. What am I doing wrong here?

ERROR in ./node_modules/axios/index.js
    Module not found: Error: Can't resolve './lib/axios' in 'C:\Users\sdr\Documents\deficarte\node_modules\axios'
     @ ./node_modules/axios/index.js 1:17-39
     @ ./src/main.js

ERROR in ./node_modules/vue-style-loader/lib/addStylesClient.js
    Module not found: Error: Can't resolve './listToStyles' in 'C:\Users\sdr\Documents\deficarte\node_modules\vue-style-loader\lib'
     @ ./node_modules/vue-style-loader/lib/addStylesClient.js 7:0-41 57:15-27 69:15-27
     @ ./node_modules/bootstrap/dist/css/bootstrap.min.css

Answer 1

Try this

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

var path = require('path');

const webConfig = {
    entry: './src/main.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.css','.jpg','.png','.js','.vue'],
        alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, './src/'),
        }
    },
    module: {
        rules: [
            { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
            { test: /\.png/,   loader: "url-loader?limit=100000&mimetype=image/png" },
            { test: /\.gif/,   loader: "url-loader?limit=100000&mimetype=image/gif" },
            { test: /\.jpg/,   loader: "file-loader" },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            { test: /\.vue$/,  loader: 'vue-loader' },
            { test: /\.js$/, exclude: /node_modules/,   loader: 'babel-loader' }, //query: {presets: ['es2015']}
            { test: /\.css$/, use: ['vue-style-loader','css-loader']} 
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
        ]
},
plugins: [
    new VueLoaderPlugin()
]
}

const nodeConfig = {
entry: './src/main.js',
mode: 'development',
output: {
    path: path.resolve(__dirname, './dist/'),
    filename: 'bundle.node.js'
},
resolve: {
    extensions: ['.js', '.vue','.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, './src/'),
    }
},
target: 'node',
node: { fs: 'empty' },
module: {
    rules: [
        // { test: /\.json/,  loader: "raw-loader" },
        { test: /\.vue$/,  loader: 'vue-loader' },
        { test: /\.js$/, exclude: /node_modules/,   loader: 'babel-loader' }, //query: {presets: ['es2015']}
        { test: /\.css$/, use: ['vue-style-loader','css-loader']} 
        // this will apply to both plain `.css` files
        // AND `<style>` blocks in `.vue` files
    ]
},
plugins: [
new VueLoaderPlugin()
]
}


module.exports = [ webConfig, nodeConfig ];
// var webpackConfig = merge(baseWebpackConfig, {
//   plugins: [
//     // service worker caching
//     new SWPrecacheWebpackPlugin({
//       cacheId: 'my-vue-app',
//       filename: 'src/service-worker.js',
//       staticFileGlobs: ['dist/*/.{js,html,css}'],
//       minify: true,
//       stripPrefix: 'dist/',
//       runtimeCaching: [
//         {
//            urlPattern: /^https:\/\/js\.api\.here\.com\/v3\/3.0\/mapsjs-core\.js\//,
//            handler: 'cacheFirst'
//         },
//         {
//            urlPattern: /^https:\/\/(\d+)\.media\.tumblr\.com\//,
//            handler: 'cacheFirst'
//         },

//      ]
//     })
//   ]

// })