For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
<% var path = '../clients/dum-ksa/assets/partial/test.html' %>
<%= require('html!' + path) %>
ERROR in Template execution failed: Error: Cannot find module "."
HtmlWebpackPlugin, eg: new HtmlWebpackPlugin({snippet: '<h1>Test</h1>'}). So I just read the file in my webpack.config and then use it in the template htmlWebpackPlugin.options.snippet. For me this is good enough
:point_up: May 4, 2021 4:31 PM
Small correction to the code posted in my previous post, it should use the full path; relative paths do not seem to work:
const customConfig = {
plugins: [
new ExtraWatchWebpackPlugin({
dirs: [ '/<FULL_PATH>/MyCustomPackage' ],
}),
],
}HI all, so I have a codebase where I've got an external module loaded via yarn add file:<path>/MyCustomPackage, but the development experience of this package is pretty horrible. How can I get webpack to update its code whenever changes are made to MyCustomPackage? At the moment the only solution is to rerun the yarn command and restart the webpack dev-server (for a recompile).
cc: @DavidArchibald
Hey folks, I've always been a bit confused between a "per method package" (https://lodash.com/per-method-packages) vs an ES module. Is there a benefit to one or the other?
I guess I'm wondering is if my library distributes an ES Module as a single file but with named exports, when webpack is bundling, does it bundle the entire ES Module file, or does it only pull out the specific bits of code imported?
I removed everything thinking I was good, then I noticed disableHostCheck is no longer a thing. When removing it, I get "Invalid host header" errors.
I'm using module federation and Fast Refresh, but no remotes, only shared packages. It should be a valid use case, but I figured all fixes were in the latest webpack-dev-server.
So I have 2 issues:
- I cannot use the latest webpack-dev-server.
- I am running muliple entrypoints on the same page with HMR and React Fast Refresh.
HMR is having issues; although, I don't know what's causing the problem. I get errors when hot updates occur as it's trying to apply those to the last-loaded entrypoint rather than the one where the changes were made.
Hey folks,
I'm tying to decrease the asset filesize. Therefore I need to show the stats of compiled files every time - even on recompilation - when running webpack-dev-server. However, the preset version "normal" is not applied and it basically hides all the stats when recompiling. How can I fix this?
I'm having some issue with configuring webpack for my electron js app. I'm trying to use
ffi-napi, ref-napi libraries to integrate native module in the electron js app. The problem I get when setting __dirname to false in node property in the webpack config file. Libraries like above expect an absolute path of the base directory. So when I turn __dirname to true then it works but I get error with my preload.js file not reloaded after the app initializes. So does anybody know how to get around of this issue? I've even posted in the Stackoverflow: https://stackoverflow.com/questions/67397295/how-to-use-other-platform-native-module-other-than-node-addons-in-the-electronbut nobody has yet answered to my question. So any help would really be appreciated. Thanks.
i got this error messgae "Module not found: Error: Can't resolve 'client.js' in '/Users/zhiyang/personal-project/mn-ssr/entry'" when is use "webpack-cli": "^4.7.0" , "webpack": "^4.39.1"
and my entry path is "/Users/zhiyang/personal-project/mn-ssr/entry/client.js"
https://github.com/webpack-contrib/webpack-defaults
It currently is broken and not updated for Webpack 5. I can fix those issues, but I wasn't sure if it was worth my time. Esp if there was something else more maintained.
A question about the copy plugin: When using
{ from: './path/to/myfont.woff2', to: 'fonts/' }
it copies -- as expected -- the fir myfont.woff2 into the output fonts/myfind.woff2. When globbing, though,
{ from: './path/to/*.woff2', to: 'fonts/' },
the files end up in fonts/path/to/. Is this a bug? If not, how to prevent it?
3 replies
10 replies
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxPlugin = require("workbox-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");
module.exports = {
mode: "development",
entry: {
index: "./src/index.js"
},
plugins: [
new HtmlWebpackPlugin({
title: "CommonWealth Project",
}),
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
}),
// new WebpackPwaManifest({
// name: "My Progressive Web App",
// short_name: "MyPWA",
// description: "My awesome Progressive Web App!",
// background_color: "#ffffff",
// crossorigin: "use-credentials", //can be null, use-credentials or anonymous
// icons: [
// // {
// // src: path.resolve('src/assets/icon.png'),
// // sizes: [96, 128, 192, 256, 384, 512] // multiple sizes
// // },
// // {
// // src: path.resolve('src/assets/large-icon.png'),
// // size: '1024x1024' // you can also use the specifications pattern
// // },
// // {
// // src: path.resolve('src/assets/maskable-icon.png'),
// // size: '1024x1024',
// // purpose: 'maskable'
// // }
// ]
// })
],
devtool: "inline-source-map",
devServer: {
contentBase: "./dist"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
clean: true
},
module: {
rules: [
{
test: /\.(s[ac]ss|css)$/i,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
// Prefer `dart-sass`
implementation: require("sass")
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true
}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "icons/"
}
}
},
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
}
]
}
};
webpack serve command, and the devServer configuration field is set to exclude node_modules from being watched)
