webpack-merge
terser-webpack-plugin
webpack-merge | terser-webpack-plugin | |
---|---|---|
3 | 6 | |
2,664 | 1,923 | |
0.1% | 0.1% | |
5.4 | 6.6 | |
7 months ago | about 2 months ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
webpack-merge
-
Struggling to get mini-css-extract-plugin working for both .css and .scss files in Webpack 5
I'm using Webpack 5 with webpack-merge so I can have separate config files for prod and dev with a common file for settings that both prod and dev share.
-
[Help] Gatsby-Plugin-React-Helmet causing build failure
You can try installing https://www.npmjs.com/package/webpack-merge or see if that merge is in your config.js or somewhere else.
-
My first public React 17 Boilerplate (with Webpack 5, Tailwind 2)
webpack-merge - Simplify development/production configuration
terser-webpack-plugin
-
Webpack npm run build with React Typescript
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"] }, }
-
Popular React Webpack Plugins for 2022
There are lots of options available with this plugin which you can check here.
- Is it fair to be skeptical of minification software, since they can potentially inject stuff?
-
Minimizing Webpack bundle size
Make sure Webpack is in production mode on release! Webpack applies a number of optimizations to your bundle, including minification with TerserWebpackPlugin if you’re using Webpack v4 or above. If not, you’ll have to install and add it manually. Other optimizations include omitting development-only code and using optimized assets.
-
is there any way to config webpack to generate single quoted code instead of double quoted code?
Specifically quote_mode in terser-webpack-plugin
-
My first public React 17 Boilerplate (with Webpack 5, Tailwind 2)
terser-webpack-plugin - Optimize and minimize JavaScript
What are some alternatives?
html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles
mini-css-extract-plugin - Lightweight CSS extraction plugin
react-webpack-5-tailwind-2 - React 17 Boilerplate with Webpack 6, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
clean-webpack-plugin - A webpack plugin to remove your build folder(s) before building
webpack-dev-server - Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
copy-webpack-plugin - Copy files and directories with webpack
UglifyJS2 - JavaScript parser / mangler / compressor / beautifier toolkit
webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap