I had installed it globally by running npm install webpack -g and I had included it in my project by running npm install webpack --save-dev.
However, on running the webpack command, I was seeing the following output:
Output filename not configured.
This is the webpack config:
output: {
filename: 'bundle.js',
library: 'require',
libraryTarget: 'this'
},
This is the only clue i could get from the web :: http://anujnair.com/blog/12-output-filename-not-configured-error-from-webpack
But it did not solve the issue
Any Help will be great
I was getting the same error and it turned out to be my webpack config file name.
I had it as "webpack.config" instead of "webpack.config.js"
The "Output filename not configured" error seems to come up generally when there is a typo somewhere, and I've found the file name to be a sneaky place you forget to check.
Also double-check that the webpack.config.js file is in the right spot (in general, the root directory of the project) and the paths listed in the config file are correct.
Common mistakes of this error is typo and most of the times it's writing
module.export instead of module.exports.
Also check the file name should be with a .js extension. e.g. webpack.config.js
You MUST have a file named webpack.config.js on project root.
You have a typo somewhere in your webpack.config.js file. Review your config file. Had similar problem and it was as a result of a typo.
Try exporting your configuration using module.exports = config where config is your configuration in a JavaScript object. In your case just do
module.exports = {
output: {
filename: 'bundle.js',
library: 'require',
libraryTarget: 'this'
}
}
If this does not solve your problems, refer to the issue on https://github.com/webpack/webpack/issues/2403
This error will also occur if you are running the command 'webpack -w' against a directory that does not have a webpack config file.
So if you are opening a new terminal window or tab and haven't changed directory to the root of your project before running the webpack command you will receive the error.
I ran into this problem after following Webpacks docs for production builds. The way I ran into the issue is, I believe, specific to webpack-merge.
This is what their docs have in webpack.dev.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
But this is what I needed to have:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common(), {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
Notice the only change is running common() instead of common.
If you using __dirname make sure it referenced to correct path. Default path is / which is local drive root.
I had a similar error and managed to resolve it. The core of the issue was not in fact in the webpack.config.js code, but rather in my entry js file (in my case main.js). Ensure that you have the correct requires and render code. My example code is as follows:
var React = require('react');
var ReactDOM = require('react-dom');
var Main = React.createClass({
render: function() {
return (
<div>
<h1>Hello World, lets see how you React..</h1>
</div>
);
},
});
ReactDOM.render(<Main />, document.getElementById('app'));
Following are the things to check when you get this error.
Whether your executing webpack command in the directory where
your webpack.config.js file resides.
You may be pointing to the wrong directory in your terminal.
Typo error with the file name "webpack.config.js".
No Module to export in your config file.
Check for typo error in your config file
create a file # root directory webpack.config.js
paste below code in this file
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
},
watch: true
}
app.js should also in root directory. write below line in app.js file:
document.write('welcome to react v2 app');
REF. https://medium.com/#dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.a64eeonhn
just to post my solution. Might help someone.
if you get this error, it always has to do with some typo error. In my case I had forgotten to close the last } with a semicolon at the end, like this: };
module.exports = {
entry: './index.js',
output: {
filename:'bundle.js'
}
};
This worked.
I came across this error when there is a spelling mistake the config details.
output: {
path: "app/dist/assets",
filname: "bundle.js",
publicPath: "assets"
},
mispelled "filename". on correcting the spelling, this issue is resolved
also after checking the right file name which should be 'webpack.config.js', a good note is to check where the 'webpack.config.js' file is located. it should be in the same folder as your package.json file is located
Assuming that you would be using windows. i ran out into same error and realized i have to do something like this in wiindows
d:\unpack-webpack> d:\unpack-webpack\node_modules.bin\webpack
instead i was doing
d:\unpack-webpack\node_modules.bin\webpack
Hope this helps :)
Thanks
Gaurav Khurana
Make sure that webpack.config is in the proper place in the tree. Actually mine was in the proper place but I had to delete the whole file and then replace because the first time I ran web pack in terminal I had missed an underscore for __dirname. Instead of two, I had one. So I ran it with that fixed that a couple times trying this or that and came across this post. So I started over and even though in the same place for some reason it wasn't according to webpack.
Related
I've got a question. How does one inject the JS code from three different files using webpack?
I've managed to write a code like just below (webpack.config.js), but somehow it doesn't work. In the bundle.js it implements only first source (index.js) but other two are omitted.
Can anyone help me? I'm just a noobie in this and I'm still learning. Thanks a lot.
const path = require('path')
module.exports = {
mode: 'development',
entry: ['./index.js','./chat.js', './ui.js'],
output: {
path: path.resolve(__dirname, ''),
filename: 'bundle.js'
},
watch: true
}
In such cases I prefer to have just one entry point that loading all dependencies, e.g. in index.js import other modules:
import('chat.js')
import('ui.js')
In my .storybook/main.js file, I have:
webpackFinal: async (config) => {
config.resolve.modules = [
...(config.resolve.modules || []),
path.resolve(__dirname),
];
return config;
},
But when I run my storybook, I get an error:
resolve 'components/Common/Button' in '/myprojectpath/pages'
Parsed request is a module
using description file: /myprojectpath/package.json (relative path: ./pages)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/myprojectpath/pages/node_modules doesn't exist or is not a directory
looking for modules in /myprojectpath/node_modules
Not sure what's happening. When I run the Next.js project, it loads fine.
Thanks in advance!
It looks like the setting absolute path issue: github issue
Most likely, will be solved with
path.resolve(__dirname, ".."), "node_modules"]
or
path.resolve(__dirname, "../src"), "node_modules"]
I have a very simple setup to understand the webpack basics.
Below is my project structure
While running the project and upon clicking on the buttons in the index.html page, the handlers are not getting executed instead log errors in the console.
Please find the project here
This may be a very silly question, but I could not understand this behavior. Hope someone can help me with this. Thanks!
You can't use the functions unless you export them when you use webpack.
index.js
export function click_blue() { ... }
export function click_red() { ... }
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
library: 'lib', // add this!
},
mode: 'development'
};
index.html
...
<button onclick="lib.click_red()">Red</button>
...
Check webpack output.library for more information.
I use chalk to write a simple script, and bundle the code using webpack.
The code print colored text before bundle, but print text without color after bundle
using webpack.
The test code is:
const chalk = require('chalk')
function main() {
console.log(chalk.blue('chalk'))
}
main()
The webpack.config.js:
const path = require('path')
module.exports = {
mode: 'production',
entry: path.resolve(__dirname, 'src/main.js'),
output: {
filename: 'bundle.js',
},
resolve: {
extensions: ['.js'],
},
}
What happened ?
For me was in the webpack configuration, I was compiling for web target instead of node target =]
It could be a problem with your individual computer or terminal. I had a similar situation, where a simple use of chalk wasn't working. Once I stopped using Solarized themes in my terminal preferences, chalk worked as expected.
(In my searching for solutions, there were a few other solutions out there for weird behavior, solved by such things as uninstalling iTerm2.)
Im using webpack 4 to bundle my dependencies (in this case AngularJS) like so:
index.js
require('angular');
require('angular-ui-router');
// ...
webpack.config.js
const path = require('path');
module.exports = {
mode: "development",
entry: "./build/index.js",
output: {
path: __dirname + '/public/js',
filename: "bundle.js"
}
}
This generates a bundle.js file containing all my dependencies.
I would additionally like to use it as a task runner to concatenate the Angular JS files from /build/js into a single file (lets call it app.js) thats placed into /public/js
Ideally, I would like the representation of the concatenated angular files (what would be in app.js) to be included within bundle.js along with my dependencies - though Im not sure if this is possible or best-practice.
As #Pete has pointed out in the comment, webpack input accepts an array of entry paths. Webpack itself doesn't take glob pattern, but you can use the glob package to do so (if you use webpack, it's likely that you've already installed it, otherwise get it here):
const glob = require('glob');
module.exports = {
mode: 'development',
entry: glob.sync('./src/**/*.js'), // ['./src/a.js', './src/dir/b.js']
...
}
Hope it helps!