Develop Reference

Webpack 5: Create vendor chunk(s) from .js files

Simply I want to insert vendor scripts in my HTML template.
These scripts are collected in the src/vendor directory.
I want to import them in my template HTML file as <script>.
For example:
<script src="../vendor/luxon.min.js"></script>
When I run webpack, it stores luxon in the dist/assets directory with the name ba9f5c2186e41fc21fa3.js. The HTML file cannot import the script because the name`- which is created by webpack - is wrong:
<script src="assets/8939b829f8da59dc2687.js"></script>
How can I insert my vendor js files to my HTML?
My webpack config:
mode: "production",
entry: {
base: "./src/base.ts",
material: "./src/ts/material.ts",
},
output: {
filename: "[name]-[contenthash].js",
path: path.resolve(__dirname, "dist"),
clean: true,
assetModuleFilename: 'assets/[hash][ext][query]',
chunkFilename: "[id].chunk.js",
library: pkg.name,
libraryTarget: 'umd',
},
module: {
rules: [
// Resolves urls in templates from <img>
{
test: /\.html$/i,
use: ["html-loader",],
},
// Support typescript
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
// Supports importing graphics in js/ts and html.
{
test: /\.(svg|png|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: 'assets/images/[hash][ext][query]'
}
},
// Support importing fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[hash][ext][query]'
}
},
// SASS support.
{
test: /\.scss$/i,
use: [
MiniCssExtractPliugin.loader, // Extract css into files
"css-loader", // Turns css into commonjs
"postcss-loader", // Cross browser support
"sass-loader", // Turns sass into css
],
},
]
},
plugins: [
new MiniCssExtractPliugin({
filename: "css/[name]-[contenthash].css",
}),
new HtmlWebpackPlugin({
title: 'index',
filename: 'index.html',
template: "./src/templates/index.html",
chunks: ['base'],
}),
new HtmlWebpackPlugin({
title: 'about',
filename: 'about.html',
template: './src/templates/about.html',
chunks: ['material'],
}),
],
optimization: {
minimize: true, // Minimize css
},
alias: {
Style: path.resolve(__dirname, 'src/sass'),
Fonts: path.resolve(__dirname, 'src/fonts'),
Images: path.resolve(__dirname, 'src/images'),
},
extensions: ['.ts'],
// External libraries which are ignored.
externals: {
luxon: 'luxon',
},
I tried to add a rule so that the name of the imported js files do not change,
but then my loaders throw many errors.
{
test: /\.js$/i,
type: "asset/resource",
generator: {
filename: 'vendor/[name][ext][query]'
}
},
Edit:
Tried the code-splitting example from webpack documentation (Prevent Duplication). Now a new bundle is created using the luxon.min.js. Unfortunately it is now complete useless because you cannot use any function of luxon anymore (typing luxon.DateTime in the browser console returns luxon is not defined).
entry: {
base: {
import: "./src/base.ts"
},
material: {
import: "./src/ts/material.ts",
dependOn: 'shared',
},
shared: './src/vendor/luxon.min.js',
},
...
optimization: {
minimize: true, // Minimize css
runtimeChunk: 'single',
},

React native web storybook react-native-vector-icons problem icon

I'm developing a react native component on storybook, which uses react-native-paper and react-native-vector-icons.
The problem is that I can't see the icons, I tried to follow the guide on react-native-vector-icons, this: webpack
Below is the webpack, but I didn't quite understand how to use the second part of the code suggested in the guide, where and how I should use it.
Can anyone help me out?
webpack:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
filename: 'index.html',
inject: 'body',
})
module.exports = {
entry: path.join(__dirname, 'index.web.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/build'),
},
resolve: {
alias: {
'react-native$': 'react-native-web',
'#storybook/react-native': '#storybook/react',
'styled-components/native': 'styled-components',
},
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: 'babel-loader',
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,
presets: [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-flow',
'#babel/preset-typescript',
{
plugins: ['#babel/plugin-proposal-class-properties', '#babel/plugin-proposal-object-rest-spread'],
},
],
},
},
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader',
},
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
},
],
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
},
}

The reason for your problem could be that your webpack.config.js is located in the folder .storybook.
So you have to change the path for loading the react-native-vector-icons and add ../ before node_modules, because of the folder structure.
...
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
// add .. to the path for node_modules
include: path.resolve(__dirname, '../node_modules/react-native-vector-icons'),
},
...
An similar issue has been described and solved here: React Native Vector Icons don't load on react-native-web storybook

Not getting Intellisense from a webpack module in VS Code

I am building a javascript library using NPM and webpack but can't seem to get intellisense to work on my exported module. At the bottom of this post I have included a link to a zip of a small demo project that depicts the problem. Specifically I have a SimulatedClient.js file which imports my module from the dist folder. If you try to use the module it works as intended and has all of the data it should, but you don't get any intellisense/autocomplete in VScode, which makes development a nightmare. How can I get vscode to give valid autocomplete for my module output? Thanks for your help and here is my current webpack setup which is also included in the attached zip:
module.exports = {
target: "web",
entry: { vueStyles: "./src/js/vueStyles.js" },
mode: "development",
devtool: "source-map",
output: {
filename: "[name].js",
path: path.join(__dirname, "dist"),
library: "vueStyles",
libraryTarget: "umd",
globalObject: "this",
umdNamedDefine: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
loader: "css-loader",
options: {
importLoaders: 1,
},
}),
new CleanWebpackPlugin(),
new ProgressBarPlugin({
format: " vueStyles webpack [:bar] " + chalk.green.bold(":percent") + " (:elapsed seconds): :msg",
clear: false,
}),
],
module: {
rules: [
{
test: /\.(sa|s?c)ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"],
},
{
test: /\.m?js$/i,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
plugins: [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-optional-chaining",
],
},
},
},
{
test: /\.(svg|ttf|eot|woff2?)$/,
loader: "url-loader?name=[name].[ext]",
},
],
},
};
Test Solution Zip

Using babel plugin in webpack configuration file

In their website, webpack shows plugin usage like this
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
I want to use babel plugin transform-async-to-generator, so I added it in babelrc file but I dont know this is enough, should I add it also webpack file ? If so how
I can not be sure if writing plugin in webpack config file required because right now I am getting runtime error and not sure if it works writing only in babelrc file.
my current webpack config file
var path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'partner/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'partner_bundle.js'
},
target: 'web',
module: {
rules: [
{
test: /\.js$/, // Check for all js files
loader: 'babel-loader',
query: {
presets: [
'babel-preset-env',
'babel-preset-stage-0'
].map(require.resolve)
},
exclude: /node_modules\/(?!other-module)/
}
]
},
stats: {
colors: true
},
devtool: 'source-map',
resolve: { symlinks: false }
}
babelrc file
{
"presets": [
"env",
"stage-2"
],
"plugins": [
"transform-async-to-generator",
"transform-async-generator-functions",
[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true
}
]
]
}

Here you can see in my webpack config how I include the babel plugins:
test: /(\.jsx|\.js)$/, // JSX and JS files should be present.
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
// Babel must be required like this to be able to use npm-link to link to shared code, see:
// https://stackoverflow.com/questions/34574403/how-to-set-resolve-for-babel-loader-presets/
presets: [
[node_modules + '/#babel/preset-env', {
// Ref: 1) http://2ality.com/2017/02/babel-preset-env.html
// 2) http://caniuse.com/usage-table
// In case it supports the browserlist in package.json, remove this here, see:
// https://github.com/babel/babel-preset-env/issues/149
"targets": {"browsers": ["> 4%", "safari 10", "ie 11", "iOS 9"]},
"modules": false,
"useBuiltIns": 'entry',
// "debug": true
}],
[node_modules + '/#babel/preset-react'],
],
plugins: [
node_modules + '/#babel/plugin-proposal-class-properties',
node_modules + '/#babel/plugin-proposal-object-rest-spread'].map(require.resolve)
}
}]

Import file with global with ES6 import

Im trying to import files from threejs library, which was moved to modules, but some of functionalities (like the VRControls) inside examples folder are using the global namespace THREE.
I've tried different approaches with the webpack imports-loader like:
import "imports-loader?THREE=three!../node_modules/three/examples/js/controls/VRControls.js";
console.log(VRControls) or console.log(THREE.VRControls) produces errors.
other attempt was to write the loader inside the babel config
return {
target: 'web',
devtool: 'source-map',
entry: './src/application.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: debug ? 'bundle.js' : 'bundle.min.js',
publicPath: ''
},
plugins,
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
loader: 'babel-loader',
query: {
compact: true,
presets: [
['es2015', {modules: false}]
]
}
}
],
loaders: [
{
test: /\.\.[\/\\]node_modules[\/\\]three[\/\\]examples[\/\\]js[\/\\].*[\/\\].*\.js/,
loader: "imports-loader?THREE=three"
}
]
},
performance: {
hints: false
}
};
and inside the app importing the file
import "../node_modules/three/examples/js/controls/VRControls.js";
gave also errors.
How can such cases be imported without the necessity to pull the whole library?