webpack4完全配置(js分组打包分模块打包压缩提取备注和css压缩打包)

const webpack = require('webpack');
const path = require('path');


/**
 * Plugin that simplifies creation of HTML files to serve your bundles
 * npm i --save-dev html-webpack-plugin
 * @type {HtmlWebpackPlugin}
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');


/**
 * A webpack plugin to remove/clean your build folder(s) before building
 * npm i clean-webpack-plugin --save-dev
 * @type {CleanWebpackPlugin}
 */
const CleanWebpackPlugin = require('clean-webpack-plugin');


/**
 * 提取css到单独文件
 * npm install --save-dev mini-css-extract-plugin
 */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/**
 * css 压缩 会清除css中注释
 * npm install --save-dev optimize-css-assets-webpack-plugin
 */
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");


/**
 * js 压缩
 * npm install uglifyjs-webpack-plugin --save-dev
 */
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");


module.exports = {
    mode: 'production',
    /**
     * entry 输入文件
     */
    entry: {
        /**
         * common 自定义公共文件
         * common: ['./commons/a.js', "./commons/b.js"],
         */
        common: [],
        /**
         * app 主文件
         */
        app: './main.js',

    },
    /**
     * 打包输出
     */
    output: {
        /**
         * publicPath
         * 生成如下链接
         *