Feel free to ask questions related to the book content or webpack here. I'll get to them eventually. Stack Overflow or Reactiflux is likely faster for general questions, though.
(I'd rather fix my parallax problem that's making a css gradient not work properly...)
Ah interesting, I hadn't really considered doing that. Might be the way forward given I can't even really remember which loader is deals with images when they're urls in the css (assume it's my url-loader). It's kind of my problem with webpack, I just deal with it so infrequently that it never quite sticks XD
I guess I actually am getting better at it, just real slowly :D
Thanks for the advice!
Hi everyone, I am trying to configure copy-webpack-plugin in order to use it with feature flags and create per-customer-builds.
the issue is that when I run build I get this error
[webpack-cli] HookWebpackError: Invalid host defined options
at makeWebpackError (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/HookWebpackError.js:49:9)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2495:12
at eval (eval at create (/home/egeo/Source/coreon-chrome-plugin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:38:1)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:457:26
at /home/egeo/Source/coreon-chrome-plugin/node_modules/copy-webpack-plugin/dist/index.js:485:13
at processTicksAndRejections (internal/process/task_queues.js:97:5)
-- inner error --
Would this error seem familiar to anyone?
I am using webpack 5 and this is my config file
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const path = require('path');
module.exports = (env) => [
{
mode: 'production',
entry: './js/background.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'background.js',
},
},
{
mode: 'production',
entry: {
'./js/login': './js/login.js',
'./js/search': './js/search.js',
'./js/options': './js/options.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [MiniCssExtractPlugin.loader, "css-loader",
{
loader: "sass-loader",
}
]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'styles/images/[hash][ext][query]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'styles/[hash][ext][query]'
}
},
]
},
plugins: [
new webpack.DefinePlugin({
BUILD_FOR: JSON.stringify(env.custom)
}),
new MiniCssExtractPlugin({
filename: ({ chunk }) => `${chunk.name.replace('/js/', '/styles/')}.css`,
}),
new CopyPlugin({
patterns: [
{
from: '/extension-icons/*',
to: 'dist/extension-icons'
}
],
}),
],
}
];Your advice was critical for success:
Reverted to copy-webpack-plugin@9.0.1
everything works like a charm
Again, thanks for your time
First I want to create a subdirectory (you can call it extended_app) in the main repo's src directory. In that subdirectory, I will create the exact folder / file structure of the src directory. The files of the subdirectory will import / export all of their respective src directory exports - think of it as an acting HEAD in my filesystem. If I need to override something, I can do it in the subdirectory without touching the original source.
Let's say the repo I'm extending consists of two files:
src/foo
import { d } from "./bar"
export const a = "a";
export const b = "b";
export const c = () => { return d }
src/bar
export const d = "d"src/extended_app/foo
export { a } from "../foo";
export const b = "b2"
export { c } from "../foo";I'm not sure what needs to be done with the plugin - I'm not very keen on the internals of webpack - but I created a demo repo of the problem. It is located here:
https://github.com/Handfish/normal-module-replacement-problem-demo/
I am able to log information at the beforeResolve hook when it passes over my subdirectory files.
So with all that being said:
Is there an easier pattern to do this without building a Webpack plugin?
Do you think what I'm trying to do is possible? If so - am I on the right track?
