Develop Reference

webpack: how do you resolve a file into the directory where the import is defined?

I am using webpack to get specific files available in an aws lambda runtime, for this webpack is configured to include certain imported files in the build directory. I can make this happen by using the webpack >5 asset/reource functionality. What i want to do however is have the files that i import be put in the same directory as where i define the import.
for example when i have a situation like below:
- folder
-- folderX
---- handler.js
and inside handler.js i import
import 'wsdl/WebService.wsdl'
then i want this file to be output in the same folder as handler like below
- build
-- folderX
---- handler.js
---- wsdl
------ WebService.wsdl
this way i can read the file in the lambda runtime.
so ive been doing this.
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolve(__dirname, 'build'),
pathinfo: false,
assetModuleFilename: '[path]/[base]'
},
mode: isProd ? 'production' : 'development',
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader', options: {transpileOnly: true} },
{
test: /\.(wsdl|xml)$/,
type: 'asset/resource',
}
],
},
which results in
- build
-- folderX
---- handler.js
-- wsdl
---- WebService.wsdl
i need the wsdl folder to be inside the same folder as the handler however. Is there any way to achieve this by using another name similar to [base] or [path]?

ok i found the answer on my own there is a lot of custom configuration availbale in the output.assetModuleFilename option, so what i ended up using was the following function.
const resolveWsdlInCurrentRuntime: Configuration['output']['assetModuleFilename'] = (pathData) => {
return join(dirname(pathData.runtime.toString()), '[path]', '[base]');
}
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolve(__dirname, 'build'),
pathinfo: false,
assetModuleFilename: resolveWsdlInCurrentRuntime,
}

Ensure export compatibiliy with npm

I'm developing a npm module and I would like it to be importable by all kind of js client side app.
Right now I tried export default myObject and module.exports = myObject
The problem is export default seems to be available only in es6 app and module.exports doesn't work in pure javascript as module is not defined.
So I would like my module to be accessible if the client use React, Angular, Vue, pure Javascript or whatever... Also my module is just an object with a list of pure javascript functions inside. No tricky part here.
Is there a way to ensure that the module is available regardless of the technology the client will use ?

The subject is a bit old now but just in case someone get the same problem.
I got it working be using UMD as Yury suggested. After some unsuccessful tries I ended up using webpack directly. Never knew he was providing us these great tools to get UMD so simply. Here is my configuration file.
I export two configuration to build a normal and a minified version at the same time.
module.exports = [
{
entry: path.resolve(__dirname, "src/myLib.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "myLib.js",
library: 'myLib',
libraryTarget: "umd",
umdNamedDefine: true,
},
mode: "development",
module: config.module,
resolve: config.resolve,
plugins: config.plugins,
},
{
entry: path.resolve(__dirname, "src/myLib.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "myLib.min.js",
library: 'myLib',
libraryTarget: "umd",
umdNamedDefine: true,
},
mode: "production",
module: config.module,
resolve: config.resolve,
plugins: config.plugins,
},
];

Webpack dev img folder always pointing to ./dist

I am new to Webpack and Javascript frontend in General, so mostly I just use other's people boilerplate.
Below is my loader for png file I'm trying to load, it has 2 webpack config, this one is webpack.renderer.config.js:
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: 'imgs/[name].[ext]'
}
}
},
and this one webpack.main.config.js (only notable code snippet):
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.join(__dirname, 'app/dist')
},
I'm utilizing Vue and Electron, by the way with boilerplate from GREG
I can show .png image on mainComponents.vue if I put it on ./dist folder directly, but always fail when I put in assets path as it should,
GET http://localhost:9080/assets/img/GeneralOutageFlow.png 404 (Not Found)
already tried using require and import but no success, here's my folder structure :
dist
src
|
|-main
|-renderer
|
|-assets
|-components
|-mainComponents
|
|-mainComponents.vue
How can I reference GeneralOutageFlow.png to /assets/img ? Thanks.

Try to set output.publicPath config to /assets/.
Like:
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.join(__dirname, 'app/dist'),
publicPath: '/assets/'
},

How to add a js file with webpack?

I was reading this webpack tutorial:
https://webpack.github.io/docs/usage.html
It says it bundles the src files and node_modules. If I want to add another .js file there, how can I do this? This is a thirdpartyjs file that is not part of the source and not part of the node_modules files. This is my current webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./app/app.js'
],
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
filename: "dist.js",
sourceMapFilename: "dist.map"
},
devtool: 'source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
],
module: {
loaders: [{
loader: 'babel',
exclude: /node_modules/
}]
},
devServer: {
inline: true
},
node: {
fs: "empty"
},
watch: false
}

The start point for code is the entry field in config. In your config entry point is the list of files. Webpack gets all, resolve their dependencies and output in one file.
You have two options for adding third party script:
add the file path to entry list before app.js
require this file from app.js

In response to Dmitry's answer:
add the file path to entry list before app.js
This has the effect that you will get a bundled .js file for each entry point, which you might not want.
require this file from app.js
You might not have access to app.js if it is written dynamically, or for whatever reason you might not want to edit app.js.
Another option:
You can use webpack-inject-plugin to inject any JS code as string into the resulting .js bundle created by webpack. This way you can read the File you want to inject as a string (e.g. fs.readFile in nodejs) and inject it with the plugin.

Another solution but without using any extra plugins:
//Webpack.config.js
entry: {
main: './src/index',
/**
/* object is passed to load script at global scope and exec immediately
/* but if you don't need then simply do:
/* myCustomScriptEntry: './src/myCustomScript'
*/
myCustomScriptEntry: {
import: './src/myCustomScript',
library: {
name: 'myCustomScriptEntry',
type: 'var',
},
},
},
new HtmlWebpackPlugin({
template: './public/index.html',
excludeChunks: ['myCustomScriptEntry'], //exclude it from being autoreferenced in script tag
favicon: './public/favicon.svg',
title: 'Alida',
}),
and
//index.html
<script type="text/javascript" src="<%= compilation.namedChunks.get('myCustomScriptEntry').files[0] %>"></script>

What is the difference between array notation and object notation when creating multiple chunks in webpack?

I have Hot Reloading feature turned on in my project like this
entry: [
'webpack-hot-middleware/client',
'./src/js/entry.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
Everything works OK until I decided to move vendors modules in different file and it didn't work. Then I realize that creating multiple chunks with array (as mentioned before) somehow differs from creating with object notation llike this
entry: {
hot: 'webpack-hot-middleware/client',
app: './src/js/entry.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/'
}
I included both app.bundle.js and hot.bundle.js in my index.html but still this does not work. Any idea why?

If you just want to specify several chunks you can just add hot-loading script to one of them:
entry: {
vandor: './vendor/vendor.js',
app: ['webpack-hot-middleware/client', './src/js/entry.js']
},
And if you want, you can do it dynamically:
entry: {
vandor: ['./vendor/vendor.js'],
app: ['./src/js/entry.js']
},
...
webpackConfig.entry.app.unshift('webpack-hot-middleware/client');