Tuesday 30 April 2019

Export 2 webpack config const

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




from Export 2 webpack config const

No comments:

Post a Comment