diff --git a/package.json b/package.json index 1d6f84249db6..eb64822d1f07 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "lint:markdown": "markdownlint --rules markdownlint-rule-emphasis-style --config ./.markdownlint.json *.md ./src/content/**/*.md --ignore './src/content/**/_*.md'", "lint:social": "alex . -q", "lint:prose": "cp .proselintrc ~/ && proselint src/content", - "lint:links": "hyperlink -c 8 -r dist/index.html --canonicalroot https://webpack.js.org/ -i --skip https://img.shields.io --skip **/printable** --skip https://david-dm.org --skip https://codecov.io/gh --skip 'content-type-mismatch https://travis-ci.org' > internal-links.tap; cat internal-links.tap | tap-spot", + "lint:links": "hyperlink -c 8 -r dist/index.html --canonicalroot https://webpack.js.org/ -i --skip https://img.shields.io --skip /plugins/extract-text-webpack-plugin/ --skip **/printable** --skip https://david-dm.org --skip https://codecov.io/gh --skip 'content-type-mismatch https://travis-ci.org' > internal-links.tap; cat internal-links.tap | tap-spot", "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml", "serve": "npm run build && sirv start ./dist --port 4000", "deploy": "gh-pages -d dist", diff --git a/repositories/plugins.json b/repositories/plugins.json index 74bcf2dae85f..696b8c96d34e 100644 --- a/repositories/plugins.json +++ b/repositories/plugins.json @@ -1,13 +1,8 @@ [ - "webpack-contrib/i18n-webpack-plugin", "webpack-contrib/compression-webpack-plugin", - "webpack-contrib/extract-text-webpack-plugin", "webpack-contrib/copy-webpack-plugin", "webpack-contrib/npm-install-webpack-plugin", "webpack-contrib/stylelint-webpack-plugin", - "webpack-contrib/babel-minify-webpack-plugin", - "webpack-contrib/uglifyjs-webpack-plugin", - "webpack-contrib/zopfli-webpack-plugin", "webpack-contrib/closure-webpack-plugin", "webpack-contrib/mini-css-extract-plugin", "webpack-contrib/terser-webpack-plugin", diff --git a/src/components/Organization/projects.json b/src/components/Organization/projects.json index 24b336eaf747..865e4be27090 100644 --- a/src/components/Organization/projects.json +++ b/src/components/Organization/projects.json @@ -101,12 +101,6 @@ "description": "Source code handling classes for webpack.", "maintainer": "" }, - { - "repo": "webpack-contrib/extract-text-webpack-plugin", - "npm": "extract-text-webpack-plugin", - "description": "Extract text from a bundle into a file.", - "maintainer": "" - }, { "repo": "webpack-contrib/sass-loader", "npm": "sass-loader", @@ -221,12 +215,6 @@ "description": "Load and execute a module while compiling, returning the result.", "maintainer": "" }, - { - "repo": "webpack-contrib/i18n-webpack-plugin", - "npm": "i18n-webpack-plugin", - "description": "Embed localization into your bundle.", - "maintainer": "" - }, { "repo": "webpack-contrib/json5-loader", "npm": "json5-loader", diff --git a/src/content/configuration/output.md b/src/content/configuration/output.md index f952ba057be8..2d2a171fc212 100644 --- a/src/content/configuration/output.md +++ b/src/content/configuration/output.md @@ -366,8 +366,6 @@ Example: `[\id\]` generates `[id]` instead of getting replaced with the `id`. If using a function for this option, the function will be passed an object containing the substitutions in the table above. -T> When using the [`ExtractTextWebpackPlugin`](/plugins/extract-text-webpack-plugin), use `[contenthash]` to obtain a hash of the extracted file (neither `[hash]` nor `[chunkhash]` work). - ## `output.assetModuleFilename` `string = '[hash][ext][query]'` diff --git a/src/content/configuration/plugins.md b/src/content/configuration/plugins.md index 5d5966a84a41..398aebd9e3b4 100644 --- a/src/content/configuration/plugins.md +++ b/src/content/configuration/plugins.md @@ -7,6 +7,7 @@ contributors: - yatharthk - byzyk - EugeneHlushko + - snitin315 --- The `plugins` option is used to customize the webpack build process in a variety of ways. webpack comes with a variety built-in plugins available under `webpack.[plugin-name]`. See [Plugins page](/plugins) for a list of plugins and documentation but note that there are a lot more out in the community. @@ -40,17 +41,12 @@ __webpack.config.js__ ```js var webpack = require('webpack'); // importing plugins that do not come by default in webpack -var ExtractTextPlugin = require('extract-text-webpack-plugin'); var DashboardPlugin = require('webpack-dashboard/plugin'); // adding plugins to your configuration module.exports = { //... plugins: [ - new ExtractTextPlugin({ - filename: 'build.min.css', - allChunks: true, - }), new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // compile time plugins new webpack.DefinePlugin({ diff --git a/src/content/guides/production.md b/src/content/guides/production.md index 253383759038..d3d5599c6639 100644 --- a/src/content/guides/production.md +++ b/src/content/guides/production.md @@ -22,6 +22,7 @@ contributors: - wizardofhogwarts - aholzner - EugeneHlushko + - snitin315 --- In this guide, we'll dive into some of the best practices and utilities for building a production site or application. @@ -199,7 +200,6 @@ webpack v4+ will minify your code by default in [`production mode`](/configurati Note that while the [`TerserPlugin`](/plugins/terser-webpack-plugin/) is a great place to start for minification and being used by default, there are other options out there: -- [`BabelMinifyWebpackPlugin`](https://github.com/webpack-contrib/babel-minify-webpack-plugin) - [`ClosureWebpackPlugin`](https://github.com/webpack-contrib/closure-webpack-plugin) If you decide to try another minification plugin, just make sure your new choice also drops dead code as described in the [tree shaking](/guides/tree-shaking) guide and provide it as the [`optimization.minimizer`](/configuration/optimization/#optimizationminimizer). diff --git a/src/content/plugins/commons-chunk-plugin.md b/src/content/plugins/commons-chunk-plugin.md index 9030c4ac1c84..6ce1fe199686 100644 --- a/src/content/plugins/commons-chunk-plugin.md +++ b/src/content/plugins/commons-chunk-plugin.md @@ -9,6 +9,7 @@ contributors: - jeremenichelli - byzyk - madhavarshney + - snitin315 --- The `CommonsChunkPlugin` is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. @@ -216,22 +217,6 @@ new webpack.optimize.CommonsChunkPlugin({ }); ``` -In order to obtain a single CSS file containing your application and vendor CSS, use the following `minChunks` function together with [`ExtractTextPlugin`](/plugins/extract-text-webpack-plugin/): - -```javascript -new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks: function (module) { - // This prevents stylesheet resources with the .css or .scss extension - // from being moved from their original chunk to the vendor chunk - if(module.resource && (/^.*\.(css|scss)$/).test(module.resource)) { - return false; - } - return module.context && module.context.includes('node_modules'); - } -}); -``` - ## Manifest file To extract the webpack bootstrap logic into a separate file, use the `CommonsChunkPlugin` on a `name` which is not defined as `entry`. Commonly the name `manifest` is used. See the [caching guide](/guides/caching) for details. diff --git a/src/content/plugins/index.md b/src/content/plugins/index.md index 6faf4db56092..8571bb402036 100644 --- a/src/content/plugins/index.md +++ b/src/content/plugins/index.md @@ -10,13 +10,13 @@ contributors: - refactorized - byzyk - EugeneHlushko + - snitin315 --- webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack __flexible__. Name | Description -------------------------------------------------------- | ----------- -[`BabelMinifyWebpackPlugin`](/plugins/babel-minify-webpack-plugin) | Minification with [babel-minify](https://github.com/babel/minify) [`BannerPlugin`](/plugins/banner-plugin) | Add a banner to the top of each generated chunk [`CommonsChunkPlugin`](/plugins/commons-chunk-plugin) | Extract common modules shared between chunks [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin) | Prepare compressed versions of assets to serve them with Content-Encoding @@ -25,10 +25,8 @@ Name | Description [`DefinePlugin`](/plugins/define-plugin) | Allow global constants configured at compile time [`DllPlugin`](/plugins/dll-plugin) | Split bundles in order to drastically improve build time [`EnvironmentPlugin`](/plugins/environment-plugin) | Shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on `process.env` keys -[`ExtractTextWebpackPlugin`](/plugins/extract-text-webpack-plugin) | Extract text (CSS) from your bundles into a separate file [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin) | Enable Hot Module Replacement (HMR) [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin) | Easily create HTML files to serve your bundles -[`I18nWebpackPlugin`](/plugins/i18n-webpack-plugin) | Add i18n support to your bundles [`IgnorePlugin`](/plugins/ignore-plugin) | Exclude certain modules from bundles [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin) | Set min/max limits for chunking to better control chunking [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin) | Keep chunk size above the specified limit @@ -41,6 +39,5 @@ Name | Description [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) | Enables a more fine grained control of source maps [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin) | Enables a more fine grained control of eval source maps [`TerserPlugin`](/plugins/terser-webpack-plugin/) | Uses Terser to minify the JS in your project -[`ZopfliWebpackPlugin`](/plugins/zopfli-webpack-plugin) | Prepare compressed versions of assets with node-zopfli For more third-party plugins, see the list from [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#webpack-plugins).