关于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
        `