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