Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@epeli/webpack-config
Advanced tools
Readme
I love the idea of React Create App but I've never been able to use it due to lack of its customization possibilities but I've never had too much trouble configuring Webpack neighter. It's just a lots of stuff to remember and I'm lazy.
So instead of writing some personal notes I've created this tiny tool which generates Webpack (and Babel) configuration. It's my "personal React Create App" if you will.
npm install @epeli/webpack-config
and in webpack.config.js
const {createWebpackConfig} = require("@epeli/webpack-config");
module.exports = createWebpackConfig();
By default it reads an entry point from ./src/index
. The index file can be
index.js
,index.jsx
,index.ts
, or index.tsx
. Production bundle is
written to ./dist/main.js
.
The default Babel configuration has react
, typescript
and env
presets.
It also adds the class properties and dynamic import proposal plugins and Emotion plugin with source maps.
Enables .mjs
based tree shaking for some npm modules (ex. react-icons).
In development when using --hot
with the webpack-dev-server
React Hot
Loader Babel plugin is activated automatically.
You can configure the configuration. Yeah known! But I think it's actually a good thing because now this tool that I know well abstracts mostly Webpack from my projects. Which means that if Webpack changes its configuration syntax or adds a feature I want to enable in my projects I can just adjust this tool and update my project deps of this.
entry: mixed
This option is passed directly to the Wepback entry option.
babelEnv: mixed
This option is passed directly to @babel/preset-env
options
extractCommons: boolean
If you have added multiple entry points using the entry
option
you can set this to true
to enable creation of an additional
bundle which includes all the common code between the entry points.
It will be written to ./dist/commons.js
.
hashFilenames: boolean
Add a hash to the generated bundle filenames.
hotCors: boolean
If you are using React Hot Loader this options makes it work cross domains by adding the required CORS headers. Ex. you can run your webserver from a virtual server / container / remote server / whatever and serve hot javascript bundles from localhost.
historyApiFallback: boolean | mixed
Enable history fallback if you want to use React Router with the HTML 5 History API. This is passed directly to devServer.historyApiFallback
babelPlugins: (string | [string, any] | Function)[]
List of custom babel plugins to enable.
You can also pass a function which is called with {mode: "production" | "development"}
which allows different configurations for production and
development.
Ex.
module.exports = createWebpackConfig({
babelPlugins: [
args => {
if (args.mode === "production") {
return "emotion";
}
return [
"emotion",
{
sourceMap: true,
autoLabel: true,
labelFormat: "[filename]--[local]",
},
];
},
],
});
template: string
This is the most custom part of this lib. It takes a path to a template file
which is processed with Lodash
templates. The end result is
written to ./dist
.
Inside the template following functions are available:
renderHash(chunkName)
render content hash of the chunkrenderScriptTag(chunkName)
render script tag for chunkrenderHashedChunk(chunkName)
render chunk name with hash query (ex. main.js?v=1234
)The chunkName
can be the entry name (ex. main
) or the extracted bundle
name commons
.
CSS files can be imported using the ES import syntax.
You can customize the env-preset with .browserlistrc
file.
When required you can completely customize the Babel configuration by
creating your own babel.config.js
, .babelrc.js
or .baberc
file.
process.env.NODE_ENV
is exposed to Javascript based Babel config files
based on the Webpack --mode
argument.
The full generated Webpack configuration can be customized with the customizer callback:
module.exports = createWebpackConfig(options, config => {
config.entry.myExtraEntry = "./src/other.js";
});
Can be activated with an ANALYZE
environment variable
ANALYZE=1 webpack --mode production
FAQs
Webpack config
The npm package @epeli/webpack-config receives a total of 32 weekly downloads. As such, @epeli/webpack-config popularity was classified as not popular.
We found that @epeli/webpack-config demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.