如果我们有合适的工具，开发就会变得更容易。在这篇文章中，我将讨论一些流行的webpack插件。
Webpack Dashboard
以上输出很难阅读和理解。此外，信息没有很好地格式化和呈现。
这里webpack仪表盘的图片有一个更好的视觉输出。通过在cmd中键入命令来安装它。
npm install --save-dev webpack-dashboard # or $ yarn add --dev webpack-dashboard
注:webpack-dashboard@^3.0.0需要node8+或以上。以前的版本只支持node6。
现在，我们需要在·webpack.config.js·中导入这个插件，并添加到plugins数组中。
//webpack.config.js const path = require('path'); const webpackDashboard = require('webpack-dashboard/plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, devServer: { port: 8080 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins:[ new webpackDashboard() // add ] }
还需要在package.json中修改你的脚本。只需要在每个脚本之前附加webpack-dashboard。
"scripts": { "start": "webpack-dashboard -- webpack serve --mode development --open --hot", "build": "webpack-dashboard -- webpack --mode production" }
运行应用程序，您将看到一个非常棒的构建过程输出。😍
Terser Webpack Plugin
terser webpack插件用于压缩你的JavaScript包的大小以供生产使用。这个插件还支持ES6+JavaScript语法。
注意:Terser webpack插件默认是webpack 5自带的。
使用下面的命令安装这个插件:
npm install --save-dev terser-webpack-plugin
然后导入并添加这个插件到你的webpack.config.js中:
//webpack.config.js const path = require('path'); const webpackDashboard = require('webpack-dashboard/plugin'); const TerserPlugin = require("terser-webpack-plugin"); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, optimization: { minimize: true, minimizer: [new TerserPlugin()], }, devServer: { port: 8080 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins:[ new webpackDashboard() ] }
Optimize CSS Assets Webpack Plugin
这个插件将搜索你项目中的所有CSS文件，并优化/压缩CSS。
npm install --save-dev optimize-css-assets-webpack-plugin mini-css-extract-plugin css-loader
webpack.config.js.:
//webpack.config.js const path = require('path'); const TerserPlugin = require("terser-webpack-plugin"); const webpackDashboard = require('webpack-dashboard/plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, optimization: { minimize: true, minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()], }, devServer: { port: 8080 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ] }, plugins:[ new webpackDashboard(), new MiniCssExtractPlugin(), new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, canPrint: true }) ] }
HTML Webpack Plugin
HTML webpack插件，用于生成HTML文件，用JavaScript代码注入脚本标签。这个插件用于开发和生产构建。
使用以下方法安装此插件:
npm install --save-dev html-webpack-plugin
webpack.config.js:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const TerserPlugin = require("terser-webpack-plugin"); const webpackDashboard = require('webpack-dashboard/plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, optimization: { minimize: true, minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()], }, devServer: { port: 8080 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ] }, plugins:[ new HtmlWebpackPlugin( Object.assign( {}, { inject: true, template: path.join(__dirname,'/src/index.html') }, // Only for production process.env.NODE_ENV === "production" ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true } } : undefined ) ), new webpackDashboard(), new MiniCssExtractPlugin(), new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, canPrint: true }) ] }
Clean Webpack Plugin
Clean webpack插件用于清理/删除你的构建文件夹。它还将在每次成功重建后删除所有未使用的webpack assets。
这个插件将帮助减少包的大小，删除不需要的文件和assets文件。
使用以下方法安装此插件:
npm install --save-dev clean-webpack-plugin
webpack.config.js:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); const webpackDashboard = require("webpack-dashboard/plugin"); const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js", }, optimization: { minimize: true, minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()], }, devServer: { port: 8080, }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader", }, { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, plugins: [ new HtmlWebpackPlugin( Object.assign( {}, { inject: true, template: path.join(__dirname, "/src/index.html"), }, // Only for production process.env.NODE_ENV === "production" ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, } : undefined ) ), new webpackDashboard(), new MiniCssExtractPlugin(), new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require("cssnano"), cssProcessorPluginOptions: { preset: ["default", { discardComments: { removeAll: true } }], }, canPrint: true, }), new CleanWebpackPlugin({ // Use !negative patterns to exclude files // default: [] cleanAfterEveryBuildPatterns: ["static*.*", "!static1.js"], // Write Logs to Console // (Always enabled when dry is true) // default: false verbose: true, }), ], };
你可以看到，在运行npm run build之后，dist文件夹下的所有文件都会被删除，之后只会发出必需的文件，temp.js也会被删除，因为它在任何文件中都没有引用。
感谢阅读这篇博客文章。如果你在使用webpack配置这些插件时遇到任何问题，请随时在评论框中发表评论。
如果你觉得这篇文章有用，请与你的朋友和同事分享!❤️
