Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work. Learn more →
Top 23 JavaScript webpack-plugin Projects
-
-
Project mention: Building a web application with Rust and WebAssembly | reddit.com/r/rust | 2022-06-16
This shouldn't be the case, at least not if you're doing it "properly". For dev builds, sure, but for production, it's better to use something like mini-css-extract-plugin to extract the bundled CSS into separate files. Then for files in your main entrypoint, the CSS will be loaded via tags, and files loaded via code-splitting, the tags will be added to the DOM dynamically.
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
-
-
I find critters[0] quite easy to work with and well worth implementing on my nextjs or Astro projects.
I build a lot of landing pages so there are very few multi page visits.
-
react-refresh-webpack-plugin
A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
You didn't mention what version of webpack. You also want to use react-refresh-webpack-plugin.
-
-
-
Zigi
Workflow assistant built for devs & their teams. Automate the mundane part of your day, with live actionable messages for your GitHub & Jira tasks.
-
-
-
-
const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const TerserPlugin = require("terser-webpack-plugin"); module.exports = { // watch: true, mode: "production", entry: "./src/index.tsx", output: { filename: 'main.js', path: path.resolve(__dirname, 'build') }, optimization: { chunkIds: 'named', minimizer: [ new TerserPlugin({ parallel: true, terserOptions: { // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions }, }), new CssMinimizerPlugin(), ], }, plugins: [ new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html'), // template file filename: 'index.html', // output file }), new CleanWebpackPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', "@babel/preset-react"] } } }, { test: /\.css$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'autoprefixer', { overrideBrowserslist: ['last 3 versions', 'ie >9'] }, ], ], }, }, }, ], }, { test: /\.scss$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: "postcss-loader", options: { postcssOptions: { plugins: [ [ "autoprefixer", { overrideBrowserslist: ['last 3 versions', 'ie >9'] }, ], ], }, }, }, 'sass-loader' ], }, { test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] }, { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/, options: { allowTsInNodeModules: true } } ] }, resolve: { extensions: ["*",".ts", ".tsx", ".js", "jsx"] }, }
-
compression-webpack-plugin
Prepare compressed versions of assets to serve them with Content-Encoding
Project mention: Enable text compression using React, Webpack and Apache | reddit.com/r/codehunter | 2022-04-21Supposedly the compression-webpack-plugin is supposed to do it.
-
dotenv-webpack
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
I am trying to use the dotenv-webpack plugin. This works great locally. But fails when I deploy to Heroku.
-
You can read more about Optimize CSS assets Webpack Plugin here.
-
Project mention: [AskJS] What are still present issues in contemporary (2022) JavaScript? | reddit.com/r/javascript | 2022-09-15
Tree shaking in CommonJS is possible: here's a Webpack CommonJS Tree Shaking package.
-
-
-
webpack-assets-manifest
This webpack plugin will generate a JSON file that matches the original filename with the hashed version.
Project mention: Best practice for shared versioning between a SPA and .Net Core API? | reddit.com/r/dotnet | 2022-04-21 -
I don't know if it works with vue-cli but I use https://github.com/cascornelissen/svg-spritemap-webpack-plugin
-
webpack-require-from
Webpack plugin that allows to configure path or URL for fetching dynamic imports
-
-
-
pug-plugin
Pug plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.
Project mention: Pug plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug | reddit.com/r/coolgithubprojects | 2022-10-04 -
InfluxDB
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2022-10-04.
JavaScript webpack-plugin related posts
- Pug plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug
- How to use Pug & Sass in Webpack 5 - 2022 🐶
- Pug plugin for Webpack
- Enabling hot reloading with ReactJS project
- Extract CSS from SCSS and deferred lazy load in React app
- Popular React Webpack Plugins for 2022
- Electron Forge Fast Refresh?
-
A note from our sponsor - Sonar
www.sonarsource.com | 28 Nov 2022
Index
What are some of the best open-source webpack-plugin projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | prerender-spa-plugin | 7,241 |
| 2 | mini-css-extract-plugin | 4,539 |
| 3 | offline-plugin | 4,487 |
| 4 | critters | 3,165 |
| 5 | react-refresh-webpack-plugin | 2,823 |
| 6 | copy-webpack-plugin | 2,750 |
| 7 | page-skeleton-webpack-plugin | 2,704 |
| 8 | workerize-loader | 2,232 |
| 9 | svg-sprite-loader | 1,935 |
| 10 | worker-plugin | 1,891 |
| 11 | terser-webpack-plugin | 1,826 |
| 12 | compression-webpack-plugin | 1,353 |
| 13 | dotenv-webpack | 1,227 |
| 14 | optimize-css-assets-webpack-plugin | 1,140 |
| 15 | webpack-common-shake | 908 |
| 16 | optimize-plugin | 651 |
| 17 | webpack-config-plugins | 627 |
| 18 | webpack-assets-manifest | 316 |
| 19 | svg-spritemap-webpack-plugin | 201 |
| 20 | webpack-require-from | 180 |
| 21 | nodemon-webpack-plugin | 176 |
| 22 | moment-timezone-data-webpack-plugin | 86 |
| 23 | pug-plugin | 43 |
Truly a developer’s best friend
Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.
scoutapm.com