sgs-node/webpack/webpack.dll.config.js

const pathConfig = require('config').get('path')
const os = require('os')
const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const AssetsWebpackPlugin = require('assets-webpack-plugin')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// const extractCSS = require('./extract.js')
const LIBRARY_NAME = '__[name]_[chunkhash]__'
const entry = require('./dllEntry')
const { NODE_ENV } = process.env
const isProduction = NODE_ENV === 'production'

const { publicPath } = require('./output.js')

const webpackConfig = {
  node: false,
  mode: 'production',
  entry,
  output: {
    filename: `js/[name].[chunkhash].js`,
    path: pathConfig.dll,
    publicPath: publicPath,
    library: LIBRARY_NAME
  },
  resolve: {
    extensions: ['.js', '.css'],
    modules: [pathConfig.nodeModule]
  },
  resolveLoader: {
    modules: [pathConfig.nodeModule]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 是否配置 static
              limit: 10000,
              name: 'image/[name].[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new webpack.EnvironmentPlugin(['NODE_ENV']),
    new CleanWebpackPlugin([pathConfig.dll], {
      root: pathConfig.root,
      verbose: false
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    }),
    new webpack.DllPlugin({
      path: `${pathConfig.dll}/[name].json`,
      name: LIBRARY_NAME
    }),
    new AssetsWebpackPlugin({
      path: pathConfig.dll,
      filename: 'index.json',
      prettyPrint: true
    })
  ],

  optimization: {
    minimizer: [
      new ParallelUglifyPlugin({
        uglifyES: {
          compress: {
            warnings: true,
            drop_console: isProduction
          }
        },
        exclude: ['vendor.js'],
        sourceMap: false
      }),
      new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g, // 正则表达式，用于匹配需要优化或者压缩的资源名
        cssProcessor: require('cssnano'), // 压缩和优化CSS 的处理器
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }]
        },
        canPrint: true // 在 console 中打印信息
      })
    ]
  },
  stats: {
    colors: true,
    modules: false,
    children: false,
    chunks: false
  }
}

module.exports = { entry, webpackConfig }