We Keep Coding

Webpack bundled JS not being executed

This is a very strange problem because actually, some of the bundled code is being executed. I use style loader for my CSS and that of course gets put into bundle.js and loads and works fine. However, I also have a file with some code to set up the jQuery localScroll plugin, and that code isn't working.
To test it, I included in the same file a call to console.log(), just telling it to write the number 4. If I open up bundle.js, I can see the console.log() call as well as the call to $.localScroll(), they just simply aren't running. Calling $.localScroll() manually from the console works as intended.
Here is the JS file in question:
console.log(4);
$(() => {
$.localScroll({duration: 800});
});
Here is my Webpack config:
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './webpack-entry.js',
plugins: [
new CleanWebpackPlugin(['dist']),
new webpack.optimize.UglifyJsPlugin()
],
output: {
filename: './javascripts/bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|jpeg)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192,
fallback: 'file-loader',
name: './images/[hash].[ext]'
}
}
},
{
test: /\.pug$/,
use: [
{
loader: 'file-loader',
options: {
name(file) {
if(new RegExp(/partials/).test(file)) {
return './views/partials/[name].[ext]'
}
return './views/[name].[ext]'
}
}
},
'pug-asset-loader?root=./src'
],
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env'],
}
},
]
}
],
}
};
Finally, here is bundle.js (my custom code seems to be at the very bottom, in some sort of array of functions). The non-uglified version is too long for SO, so here it is on Hastebin: https://hastebin.com/vululimupi.js

The problem is that you haven't defined this dependency as a module. Rewriting it following supported module format specs should help.

After some testing, it seems that the essential problem is just as #uKolka was saying - my files were not getting required as modules. While I'm still not entirely certain why their code was still appearing in my bundle file but not running, I have found a way to still reap the recursive benefits of require.context(). It seems that require.context() returns a function which is itself capable of resolving the files it logs in whatever folder you have pointed it at. It also has a member function keys() which quite conveniently returns each dependent file name and is easily used with forEach().
Given all that, this is how my webpack-entry.js looks now:
import './src/stylesheets/scss/master.scss';
require.context('./src/views', true, /\.pug$/);
const js = require.context('./src/javascripts/', false, /\.js$/);
js.keys().forEach(key => js(key));
This works just fine.

In my case it was due to Babel and React. If you use React, then try to call ./src/index.js directly and use "#babel/preset-env", "#babel/preset-react" in your .babelrc. You can take a look at my gist. and in your webpack.config.js:
{
test: /\.js?$/,
use: ["babel-loader"],
exclude: /node_modules/
},
take a look at the gist:
https://gist.github.com/Nagibaba/14e898d99a4be89b00a60d28abc19bc0

For ruby's rails/webpacker users only.
This question title and content made me find it before this issue which may be the correct answers for some users here. To avoid link rot, I'll explain it shortly below:
Make sure your #rails/webpacker npm library and webpacker gem both have the same exact version.
I ended up doing:
IO.foreach("package.json").find { |line| line[%r("#rails/webpacker": "(.*?)")]}
gem "webpacker", Regexp.last_match(1).tr("-", ".")

How to disable AMD on 4 files and load them in order with webpack

I need to disable AMD on 4 files and load video.js first before loading the other 3 files, because they depend on it. When I tried doing it in webpack.config.js like so:
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
devServer: {
inline: true,
contentBase: './src',
port: 3333
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules|lib/,
loader: 'babel',
query: {
presets: ['es2015', 'react', 'stage-2'],
plugins: ['transform-class-properties']
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /[\/\\]lib[\/\\](video|playlist|vpaid|overlay)\.js$/,
exclude: /node_modules|src/
loader: 'imports?define=>false'
}
]
}
}
It doesn't really work, because it just loads video.js (with disabled AMD) and completely ignores the other 3 files.
My folder structure is like so:
▾ lib/
overlay.js
playlist.js
video.js
vpaid.js
▸ node_modules/
▾ public/
200.html
bundle.js
▾ src/
App.js
index.html
main.js
LICENSE
package.json
README.md
webpack.config.js
Now, I found something that takes me 1 step back, because now even video.js doesn't load:
require('imports?define=>false!../lib/video.js')
require('imports?define=>false!../lib/playlist.js')
require('imports?define=>false!../lib/vpaid.js')
require('imports?define=>false!../lib/overlay.js')
and instead just throws these kinds of warnings:
WARNING in ./~/imports-loader?define=>false!./lib/video.js
Critical dependencies:
15:415-422 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/video.js 15:415-422
WARNING in ./~/imports-loader?define=>false!./lib/playlist.js
Critical dependencies:
10:417-424 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/playlist.js 10:417-424
WARNING in ./~/imports-loader?define=>false!./lib/vpaid.js
Critical dependencies:
4:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/vpaid.js 4:113-120
WARNING in ./~/imports-loader?define=>false!./lib/overlay.js
Critical dependencies:
10:416-423 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/overlay.js 10:416-423
So, my question is, how can I make this work in webpack.config.js so that I don't get these warnings?

I have solved the problem! To make this work you need this:
{
test: /[\/\\]lib[\/\\](video|playlist|vpaid|overlay)\.js$/,
exclude: /node_modules|src/
loader: 'imports?define=>false'
}
and this
require('script-loader!../lib/video.js')
require('script-loader!../lib/playlist.js')
require('script-loader!../lib/vpaid.js')
require('script-loader!../lib/overlay.js')
together!
Now, if you use this (instead of script-loader):
require('imports?define=>false!../lib/video.js')
require('imports?define=>false!../lib/playlist.js')
require('imports?define=>false!../lib/vpaid.js')
require('imports?define=>false!../lib/overlay.js')
It's not gonna work! (you need both imports-loader and script-loader working in unison.

Multiple package.jsons with ES6 Babel

I have a large project that I would like to divide up into multiple package.json's so that the dependencies for each part can be clearly stated and so those packages can be exported as individual parts.
However, I want my app to include each of these packages and compile them using webpack and babel. There are shared dependencies for the packages, so I don't want to just output each one to a /dist folder.
My ideal directory structure looks like this:
\main
\app
\node_modules
package.json
\package1
package.json
node_modules
index.js
\package2
package.json
node_modules
index.js
I tried multiple approaches:
Using webpack's resolve modules with something like path.resolve('app'). This just doesn't work, even though it should in theory.
Using main's package.json to reference others using "package1" : "file:../package1". This doesn't treat package1 as es6 javascript and throws errors. Using resolveLoaders in the webpack configuration does not help.
The webpack config I have is as follows.
module: {
loaders: [
{
test: /\.js?/,
loader: 'babel-loader',
include: [
path.resolve('app'),
path.resolve('../prose'),
],
query: {
plugins: [
['react-transform', {
transforms: [{
transform: 'react-transform-hmr',
// If you use React Native, pass 'react-native' instead:
imports: ['react'],
// This is important for Webpack HMR:
locals: ['module']
}]
}],
['transform-object-assign']
]
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.svg$/, loader: 'file-loader' },
{ test: /\.png$/, loader: 'file-loader' },
{ test: /\.jpg$/, loader: 'file-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
modules: [
path.resolve('app'),
'node_modules',
],
extensions: ['.json', '.js', '.jsx'],
}
Any thoughts or examples of other projects that do this would be appreciated!

You should check out lerna. It enables you to use multiple package.jsons and even packages in one repo. It might help you with you requirements.

How to configure font file output directory from font-awesome-webpack in webpack?

I just installed font-awesome-webpack. I import it using: require("font-awesome-webpack");
My webpack config includes the following in my module loaders array:
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
Problem is I am getting this error in developer console:
localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)
The problem is, those files are created at the root (within the mysite directory). How do I configure such that those woffs and ttf are output within the mysite/app directory?

I've recently wanted to use font awesome with webpack v1, I've installed the npm module font-awesome not font-awesome-webpack
You must install few loaders before :
npm i css-loader file-loader style-loader url-loader
and add use them in your webpack.config.js :
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css?sourceMap'
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}]
}
Now if you include in your entry.js :
require('font-awesome/css/font-awesome.css');
You normally be able to use font-awesome in your template :
<i class="fa fa-times"></i>
This gist helped me : https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

As of Feb. 2016 this seems to be a common question with webpack, so I hope this provides some help. If you add this to the loader: '&name=./path/[hash].[ext]', that specifies where to look for those files. For example:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}
This places the correct URL to the fonts within the generated CSS file.
I recommend this method when dealing with anything other than css/scss. Hope this helps.

In addition to the above answers, I
I had to specify a path in output to get it working like so to specify the hosted location and not write the assets to the root path:
output: {
filename: "./bundle.js",
path: “./client”
},
module: {
loaders[
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
}
] // loaders
} // module

{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=100000'
}
This schema helped me

This is my case, because of my script path is like below:
script(src='/javascripts/app.js')
So, I have to add '&name./javascripts/[hash].[ext]' to all font files like:
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?name=./javascripts/[hash].[ext]"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}

Just as a note, I came across a similar fault using the font-awesome-loader.
Where the directory would not be set correct, regardless of any of the changes above.
To correct this, the option publicPath can be added to output:
output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },
The folder /assets/ will be changed to wherever you actually store your fonts.
Hopefully this helps.

I had font-awesome-webpack working on my PC, but it wouldn't work on my Mac. I think my PC was still throwing the 404s for the .woff2, .woff, and .tiff, but the icons displayed properly, so I ignored the problem.
My Mac, however, would not display the icons. While reading this Q&A, I tried a bunch of things. Here's what lead to my solution:
On my http://localhost:8080/View/ page, I was getting 404s that looked like the link below:
I entered http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 into the browser, and confirmed the 404.
I tried going to http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (removing the extra path before the font file), and was able to access the file.
I modified Paul's answer to remove the . that made the file request relative.
For example, Paul suggested:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}
Take note of the &name parameter, that uses ./[hash].[ext]. I dropped the leading . and now there are no 404s (the browser correctly requests the files from the root of the site):
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]'
}
Conclusion: If your entry point is NOT at your web root, and you're able to access the font files at the web root, you probably just need to use this name configuration to fix the path.

Same issue faced.
Fixed it using the below syntax,
loader: "file?name=./fonts/[hash].[ext]"
fonts is the directory name, replace it with your own directory name.
Example:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

How do I make Webpack exit with an error when jshint emits warnings?

Using jshint-loader with Webpack, how do I make the webpack command fail when JSHint emits warnings?
The context being that I wish to fail the CI build if linting detects issues.
Currently, I've simply configured Webpack to run jshint-loader on preload of JS files:
// webpack.config.js
module.exports = {
module: {
preLoaders: [
{
test: /\.js/,
exclude: /node_modules/,
loader: 'jshint-loader',
},
],
},
};

First, jshint-loader must be configured to fail in case issues are found (failOnHint: true), optionally one can also choose to emit warnings as Webpack errors (emitErrors: true).
// webpack.config.js
module.exports = {
module: {
preLoaders: [
{
test: /\.js/,
exclude: /node_modules/,
loader: 'jshint-loader',
},
],
},
jshint: {
emitErrors: true,
failOnHint: true,
},
};
Second, Webpack must be told to fail hard, by supplying the --bail option: webpack --bail.
Update:
webpack --bail still doesn't emit a non-zero exit code, argh.