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')
Related
I have built a custom HTML framework that has a pretty simple project structure. I really need to grab from 3 separate directories views,js, and components. I am very new to webpack but I figured with its configurability there would be a way for me to have all of these imports importing something like /components/random_component_name.js I need webpack to resolve these files to be their private path.
I have tried many different things this is what I have most recently tested
const path = require('path');
module.exports = {
entry: path.resolve(__dirname + '/public/js/main.js'),
module: {
generator: {
js: {
// Generator options for asset modules
// Customize publicPath for asset modules, available since webpack 5.28.0
publicPath: '/js',
// Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
outputPath: path.resolve(__dirname + 'public/js'),
},
},
},
}
How can i get this functionality out of webpack. Surely it shouldn't be too hard. I am new to all bundlers like this so sorry if this is horribly wrong.
I finally figured it out. I had tried a method close to this before but neglected the '/' in the alias key names so now this work
const path = require('path');
module.exports = {
//...
entry: {
main: './src/js/main.js',
},
resolve: {
alias: {
'/components': path.resolve(__dirname, 'src/components/'),
'/js': path.resolve(__dirname, 'src/js/'),
'/views': path.resolve(__dirname, 'src/views/'),
},
}
};
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:
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.
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
Im trying to export these two pieces of code cli.js and program.js, where cli depends on program and program has a bunch of other dependencies...
Webpack is doing a great job in bundling all dependencies of program.js (./a,./b,./c...) and correctly ignoring the ones that are externals like 'jquery', 'bluebird' ...
however when it comes to bundle the cli.js .. its not referencing the program.dist.js entry point, but bundling a copy of the entire program once again...
how could i fix this issue? is it a limitation with webpack? or is there any way around it? im currently using webpack 2.1.0-beta.27
this is my webpack.config.js
const path = require('path');
module.exports = {
entry: {
cli: './bin/cli.js',
program: './program.js',
},
target: 'node',
output: {
libraryTarget: 'umd',
filename: '[name].dist.js',
umdNamedDefine: true,
path: path.resolve(__dirname, 'distribution'),
},
externals: [
/^[a-z\-0-9]+$/
]
}
program.js
let a = require('./a'),
b = require('./b'),
c = require('./c');
bin/cli.js
const program = require('../program');
program.doSomething();
just a side node...
I cant split it into chunks with CommonsChunkPlugin because it would make my cli.dist.js unable to be executed by node.js like node cli.dist.js