Develop Reference

ERROR in ./src/components/navbar/HomeNav.js Module build failed - Webpack error

I have a react project that was created by CRA. Now i installed webpack because i wanted to add Jquery into config. Now I am getting this error after initializing webpack:
Could someone help me?
cli image
Webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "./bundle.js",
},
mode: 'development',
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env','#babel/react'],
plugins: ['#babel/proposal-class-properties', '#babel/plugin-proposal-object-rest-spread', '#babel/plugin-syntax-dynamic-import']
}
}
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader' },
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: "./dist/index.html",
filename: './index.html',
favicon: './dist/favicon.ico'
}),
new InterpolateHtmlPlugin({
PUBLIC_URL: 'static' // can modify `static` to another name or get it from `process`
})
],
};
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
please help

Webpack4: Process CSS and SCSS file with separate entry point

How can I target all CSS and SCSS files in a folder with an entry point, process them and then output the result into a single file in Webpack 4?
For JavaScript seems very straightforward: In the following example, I'm getting all files with js extension located in assets/js then they are transpiled and saved into /dist/bundle.js:
const path = require("path")
const glob = require("glob")
module.exports = {
devtool: 'source-map',
entry: glob.sync("./assets/js/*.js"),
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
}
]
},
}
I'd like to do the same (along with the previous example) but with CSS and SCSS files. I've tried:
const path = require("path")
const glob = require("glob")
const mcep = require("mini-css-extract-plugin")
module.exports = {
devtool: 'source-map',
entry: {
javascript: glob.sync("./assets/js/*.js"),
css: glob.sync("./assets/css/**/"),
},
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
},
{
test: /\.(sa|sc|c)css$/,
use: [
{
loader: mcep.loader
},
{
loader: "file-loader",
/*options: {
name: "bundle.css",
outputPath: "dist/css/"
}*/
},
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
plugins: [
new mcep({
filename: "./dist/css/[name].css",
chunks: ['css']
})
]
}
but it does not work. Again, I'd like to target all files within a specific folder, process them and ouput them into /dist/css/something.css, I don't want to import them into a js file.
Thanks

How do I configure my Electron app with Webpack for production?

This is my webpack.config.js file
I've just done a build with electron-packager for the first time and realized that I'm pointing only the devServer in here.
I've been doing some research but haven't found much that's helpful. I'd love some help as to setting up my Webpack config to hit my production server.
My main issue is I don't really know where to start, i.e. what's important in a webpack prod config vs a dev config. Is it as simple as providing an alternate URL is different bundling of files?
Thanks!
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './scripts/app.js']
},
output: {
// path: './public/built',
path: path.resolve(__dirname, 'public/built'),
filename: 'bundle.js',
publicPath: 'http://localhost:8080/built/'
},
devServer: {
// contentBase: './public',
contentBase: path.join(__dirname, 'public'),
publicPath: 'http://localhost:8080/built/'
},
module: {
rules: [
{
test: /\.jsx?$/,
enforce: "pre",
loader: "eslint-loader",
exclude: /node_modules/
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-3']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$")),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
failOnWarning: false,
failOnError: true
}
}
})
]
}

Vuejs / Webpack exclude json file from bundle

I have a no-sql database in the root of my project and I don't want webpack to include it in its bundle. Now I have to rebuild everytime the db gets updated. I'm using webpack 2.2.1. This is what I have:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './resources/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('resources'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('resources'),
'assets': resolve('resources/assets'),
'components': resolve('resources/components')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('resources'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('resources'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
I tried to exclude it by adding it to the externals like so
externals: ['./../db.json'],
Or adding a rule like so
{
test: /\.json$/,
exclude: resolve('db.json')
}

as long as you require()/import it, you will always have to re-build, because webpack will convert it into a new file, as a webpack module.
What you really have to do is load it via AJAX from the browser after your app has started, with your AJAX tool of choice.

Cannot find update. Need to do a full reload! in webpack

This is my file webpack.config.js . Although I added ['react-hot' ,'babel']. But can resolve it.
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'client/');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
});
var config = {
cache: true,
devtool: 'eval', // 'source-map', 'eval'
entry: [
'webpack-dev-server/client?http://localhost:3000/',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'client'),
exclude: /node_modules/,
loader: ['react-hot' ,'babel'],
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(jpe?g|png|gif|jpg|svg)$/i,
loaders: [
'file?images/hash=sha512&digest=hex&name=../build/img/[hash].[ext]',
'image-webpack?{optimizationLevel: 9, interlaced: false, pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=../build/fonts/[name].[ext]'
}
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./client/assets/css/")]
},
plugins: [
devFlagPlugin,
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: true,
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
module.exports = config;

I believe your problem is you need to use babel-preset-react-hmre in order for it to work properly. More info here here.
For example
{
test: /\.jsx?$/,
include: path.join(__dirname, 'client'),
exclude: /node_modules/,
loader: ['react-hot' ,'babel'],
query: {
cacheDirectory: true,
presets: ['react', 'es2015', 'react-hmre']
}
},