关于webpack:a-preliminary-understanding-of-webpack

`html-webpack-plugin`:    形容： `webpack`打包时，创立一个 `html` 文件，并把 `webpack` 打包后的动态文件主动插入到这个 `html` 文件当中    装置：yarn add html-webpack-plugin -D    应用示例：    `        const HtmlWebpackPlugin = require('html-webpack-plugin')        plugins: [            new HtmlWebpackPlugin({                filename: 'index.html',                template: 'template.html            })        ]    `

`uglifyjs-webpack-plugin`:    形容：插件用来放大（压缩优化）js文件    装置: yarn add uglifyjs-webpack-plugin -D    应用示例：    `        const UglifyJsPlugin = require('uglifyjs-webpack-plugin')        optimization: {            minimizer: [new UglifyJsPlugin()]        }    `

`clean-webpack-plugin`:    形容：革除打包之后多余的, 不确定的文件    装置：yarn add clean-webpack-plugin -D    应用示例：        const { CleanWebpackPlugin } = require('clean-webpack-plugin')        plugins: [            new CleanWebpackPlugin()        ]

`copy-webpack-plugin`:    形容: 动态资源打包原样输入    装置: yarn add copy-webpack-plugin -D    应用示例：        const CopyWebpackPlugin = require('copy-webpack-plugin')        plugins: [            new CopyWebpackPlugin({                patterns: [                    {                        from: path.join(\_\_dirname, 'assets'),                        to: 'assets'                    }                ]            })        ]

  `optimize-css-assets-webpack-plugin`:    形容：用于优化或者压缩CSS资源    装置：yarn add optimize-css-assets-webpack-plugin -D    应用示例：        `            const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')            plugins: [                new OptimizeCssAssetsPlugin()            ]                `

`terser-webpack-plugin`:    形容：用于压缩javascript    装置：yarn add terser-webpack-plugin -D    应用示例：        `            const TerserPlugin = require('terser-webpack-plugin')             optimization: {            minimizer: [new TerserPlugin()]        }        `        `          生产环境下（默认配置）：          optimization: {            minimizer: [new TerserPlugin({              terserOptions: {                warnings: false,                compress: {                  warnings: false,                  drop_console: false,                  dead_code: true,                  drop_debugger: true                },                output: {                  comments: false,                  beautify: false                },                mangle: true              },              parallel: true,              sourceMap: false            })],          },        `

`mini-css-extract-plugin`：    形容：将CSS提取为独立的文件的插件    装置：yarn add mini-css-extract-plugin -D    应用示例:        `            const MiniCssExtractPlugin = require('mini-css-extract-plugin')            module: {                rules: [                    { test: /\\.(scss|sass|css)$/, use: \[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'\] }                ]           }         `

`webpack-node-externals`：    形容：当在Webpack中捆绑时，它将疏忽node_modules    装置： yarn add webpack-node-externals -D    应用示例：        `            const nodeExernals= require('webpack-node-externals')            externals: [nodeExernals()]                    `

`热加载`：    应用示例：    `        const webpack = require('webpack')        plugins: [            new webpack.HotModuleReplacementPlugin()        ]            `

`用于创立编译时 “配置的全局常量”  以不便进行 环境转换`:    应用示例：        `            const webpack = require('webpack')            plugins: [                new webpack.DefinePlugin({                    'process.env': {                        `NODE_ENV: (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'prod') ? "'production'" : "'development'"`                    }                })            ]        `

`webpack-merge`:    形容：webpack合并    装置 yarn add webpack-merge -D    应用示例：        `            const webpackMerge = require('webpack-merge')            const baseWebackConfig = require('./webpack.config.base')            const webpackConfig = webpackMerge(baseWebackConfig, {              mode: 'development',              devtool: 'eval-source-map',              stats: { children: false }            })            module.exports = webpackConfig        `