Develop Reference

Webpack debuging tools

I build my project using webpack and want to be able to look at the code in browser but webpack devtools doesn't appear in browser.
I wonder why? I did everything like they say in a book.
Here is my webpack.config file
var path = require('path');
module.exports = {
entry: "./src/App.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
devtool: "#source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
]
}
}
And here is devtools in browser without webpack in it
Why doesn't it appear in the browser devtools?

You havent set the mode, which defaults to production. See here: https://webpack.js.org/configuration/mode/
And it should be source-map, without the #. Also added sourceMap to the module options, see if that helps.
var path = require('path');
module.exports = {
mode: 'development', // This
entry: "./src/App.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
devtool: "source-map", // This
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
sourceMap: true, // This
}
}
}
]
}
}

Webpack bundled all files from dir

I bundled project with webpack 1. Project is consist of several folders. I noticed that js file that did not imported anywhere also end up in the bundle. Why does it happened?
As i know Webpack should resolve dependency graph and bundle file regarding it.But it seems it just bundle all files from the project directory.
Here is a part of my config:
entry: {
app: [path.resolve(__dirname, '../src/main.js')]
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js',
publicPath: '/',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['', '.js', '.jsx'],
},

Remove the empty string from resolve extension.
I prefer to use the loaders module like so:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0', 'es2015-ie'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},

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
}
}
})
]
}

Moving from webpack v1 to v2

I'm trying to migrate my code from webpack v1 to v2 and add in the sass-loader, however I get the error
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
I'm very confused as to what the final file is supposed to look like:
let webpack = require('webpack');
let path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: [
'./src/index'
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}],
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
resolve: {
extensions: ['.js'],
options: {
enforceExtension: false
}
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true,
options: {
context: __dirname
}
})
]
};
At the moment the code is a mix of the two versions. I am using webpack version 2.2.1. Thanks.

There are several things you need to change:
Your test: /\.js?$/ and the corresponding loader and exclude should be another object inside the rules array:
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
},
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve.options does not exist, it is just resolve.enforceExtension directly:
resolve: {
extensions: ['.js'],
enforceExtension: false
},
And finally, although it's not an error but just a warning, new webpack.NoErrorsPlugin() is deprecated and has been replaced with:
new webpack.NoEmitOnErrorsPlugin()
Also if you haven't yet, you should have a look at the migration guide from the official docs https://webpack.js.org/guides/migrating/.

Cannot find module, but module exists and is not required by this bundle

I have an Express server with a React client-side app, I set up my webpack config to output two bundles, one for my server and one for my react app.
I cannot compile my server bundle unless I comment out the shebang at the start of bin/www. If I do comment it out and compile everything I can't start the server because I get this error:
Error: Cannot find module 'querystring'.
at /Users/jahansj/Documents/personal-projects/roomshake/app_dist/js/app_bundle.js:51283:42
Query string is installed, saved as a dependency and I can see it in my node_modules folder.
I have tried not excluding node_modules from my webpack config as well as using a shebang loader in babel to see if commenting out the shebang was causing the problem somehow.
This is my webpack.config.js:
module.exports = [{
name: 'dev',
entry: './dev/js/main.js',
output: {
path: 'dist/js',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: (/node_modules/ || /app/),
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}
]
}
},
{
name: 'app',
target: 'node',
entry: './app_dev/bin/www',
output: {
path: 'app_dist/',
filename: 'app_bundle.js'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: (/node_modules/ || /dev/),
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
}];