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.
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')
I'm pretty inexperienced with webpack. I'm actually using Cloudflare Wrangler, which I believe uses Webpack 4 under the hood. In any case I have an src/index.js file and a helpers/script.js file.
my index.js file works fine, builds and compiles etc etc.
When I copy the content of helpers/script.js into the top of the index.js file, again all is good and works.
When I import script.js with either of
import human from "../helpers/script"
const human = require("../helpers/script")
then I use a webpack.config.js file that looks like
module.exports = {
target: 'webworker',
context: __dirname,
entry: './src/index.js',
mode: 'production',
module: {
rules: [
{
test: /\.index\.js$/,
use: { loader: 'worker-loader' }
}
],
},
resolve: {
extensions: ['.js'],
},
};
I can't seem, no matter what I do to get it to 'like' the imported script file.
I continually get:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...
Error: webpack returned an error. Try configuring `entry` in your webpack config relative to the current working directory, or setting `context = __dirname` in your webpack config.
Can anyone help me understand the requirements for being able to import a file to another js. Its amazing how hard this is to do :joy:
problem
I use <script> to import index.bundle.js which bundled by webpack5 in a HTML.But I failed.
option file
//webpack.config.js
const path = require('path');
module.exports = {
entry: {
index: '/src/index.ts'
},
output: {
path: path.join(__dirname, 'dist'),
library: 'test',
libraryTarget: 'umd',
}
}
//index.ts
export function mount() {
console.log("mount")
}
//html
<script src="dist/index.js"></script>
<script>
console.log(window.mount());
</script>
error
Uncaught TypeError: window.mount is not a function
code
I have checked the official documentation.But I can't find answer.
my code is here
use
yarn
npm run build
then open the index.html,you can find the error.
Using the config you currently have (which is not putting them on the root window object), you can access your functions with window.test.mount(), because that's what you have in library in the webpack config.
If you want to put these functions on the root window object, you'd need to do that in your code:
export function mount() {
console.log("mount")
}
window.mount = mount
// etc.
You can see this by checking out dist/index.js (dropping it in the Prettier tool online can clean it up enough to be readable).
There are a lot of questions on this, and a lot of answers, read below to see what I've tried, and how they didn't work. I assume my problem is coming from a fundamental misunderstanding of how url-loader works.
I have images included like this in my .less files. I am using two different formats as an example of what I've tried.
app.less
#logo {
background-image: url("~/img/LoginMarketingImage.png");
}
#logotwo{
background-image: url("../public/img/LoginMarketingImage2.png");
}
webpack.config.js
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/app.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: '/'
},
I have also tried
webpack.config.js
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/app.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: ''
},
As well as below, based on: webpack css-loader not finding images within url() reference in an external stylesheet
webpack.config.js
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/app.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: 'https://localhost:9081/'
},
My module config looks like
webpack.config.js
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 2000000,
name: utils.assetsPath('img/[name].[ext]')
}
},
]
}
I have experimented with a limit of 1 and a higher limit, to see if inline vs non-inlined works.
My folder structure is as follows
build/
less/
app.less
public/
img/
LoginMarketingImage.png
LoginMarketingImage2.png
config/
webpack/
webpack.config.js
My Results
If I set the limit to 1, and force all images to be output directly, the only time they are output is if they use the url("../") syntax. url("~/") throw no webpack errors, but the images don't get output to the build folder. In this case, the images using url("../") syntax throw no errors in the browser either. However, this is not ideal, as I want to take advantage of url-loader's ability to return a DataURL. In this scenario, images using url("~/") syntax give the error GET https://localhost:9081/img/logo.png 404 (Not Found), regardless of publicPath setting.
If I set the limit to 20000000, obviously no images are put in the build folder by file-loader. However, all images return a 404 in the browser, regardless of publicPath setting.
I feel like I'm misunderstanding how to use url-loader. What kind of configuration do I need, and how should I be requiring my files inside less, to take advantage of url-loader's ability to return DataURLs?
EDIT: Based on this issue, I have ensured that css sourcemaps are disabled.
I can't pinpoint the problem here, but it seems like the publicPath config is the problem. I threw together a sample gist with the minimium you need to get the url-loader working properly.
Some things to note:
Make sure the test option is correct
You didn't mentioned which version of webpack you're using, but I assume it's > 2. If it's == 2 then you should upgrade because the newer versions fixed a lot of bugs and the config API is almost 100% compatible
Do not use the tilde import path, it's a shortcut to project-root-dir/node_modules (at least in webpack 1.x)
I assume you're using webpack-dev-server. If not, then you should not need to set the publicPath and such
Do not change url-loader's name option unless you got everything working without it. Changing it's path can confuse webpack
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.