terser-webpack-plugin
clean-webpack-plugin
terser-webpack-plugin | clean-webpack-plugin | |
---|---|---|
6 | 3 | |
1,923 | 1,959 | |
0.1% | - | |
6.6 | 1.8 | |
about 2 months ago | over 2 years ago | |
JavaScript | TypeScript | |
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.
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
clean-webpack-plugin
-
TypeError: CleanwebpackPlugin is not a constructor
throw new Error(`clean-webpack-plugin only accepts an options object. See: ^Error: clean-webpack-plugin only accepts an options object. See: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional at new CleanWebpackPlugin (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13) at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5) at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\prepareOptions.js:21:13) at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\prepareOptions.js:9:5) at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\convert-argv.js:119:14) at C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\convert-argv.js:125:17 at Array.forEach () at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\convert-argv.js:123:15) at Object. (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40) at Module.\_compile (internal/modules/cjs/loader.js:776:30) at Object.Module.\_extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module.\_load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:829:12) at startup (internal/bootstrap/node.js:283:19) if i delete line 56 in webpack.config.js i can run the web application without problems, but i want to understand the source of this issue
- My journey through my second elixir, phoenix app, job hunt, simple CRUD based tool to help aid hunting down jobs or tracking anything you fancy in a stateful, timeline manner
-
My first public React 17 Boilerplate (with Webpack 5, Tailwind 2)
clean-webpack-plugin - Remove/clean build folders
What are some alternatives?
html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles
react-webpack-5-tailwind-2 - React 17 Boilerplate with Webpack 6, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
webpack-dev-server - Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
mini-css-extract-plugin - Lightweight CSS extraction plugin
webpack-cli - Webpack's Command Line Interface
UglifyJS2 - JavaScript parser / mangler / compressor / beautifier toolkit
webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
webpack-merge - Merge designed for webpack
babel-plugin-lodash - Modular Lodash builds without the hassle.
optimize-css-assets-webpack-plugin - A Webpack plugin to optimize \ minimize CSS assets.