Currently, I am facing a challenge while building a webpack file. The issue arose when I needed to incorporate the 'node' target due to conflicts with an 'fs' function that reads certain files. Subsequently, I decided to split my configuration into web and node segments. However, I am uncertain if this approach is correct.
I am in the process of segregating these webpack configurations.
Below is 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']}
]
},
plugins: [
new VueLoaderPlugin()
]
}
However, I am encountering errors. The first one pertains to issues with js files, even though I am not utilizing them at the moment. What could be the potential mistake on my end?
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