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

const pathConfig = require('config').get('path')
const webpackConf = require('config').get('webpack')
const path = require('path')
const webpack = require('webpack')
const SWPrecachePlugin = require('sw-precache-webpack-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-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 { NODE_ENV } = process.env
const isProduction = NODE_ENV === 'production'

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

const { clientEntry } = require('./entry')
const { entries: assetsEntry = {} } = webpackConf

const webpackConfig = {
  target: 'web',
  mode: 'production',
  entry: Object.assign(
    {},
    assetsEntry,
    { global: pathConfig.global },
    clientEntry
  ),
  output: {
    filename: `js/[name].[chunkhash].js`,
    path: pathConfig.dist,
    publicPath: publicPath
  },
  resolve: {
    alias,
    extensions: ['.js', '.json', '.vue']
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'image/[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: {
                      browsers: ['Android >= 4.0', 'ios >= 6']
                    },
                    debug: true,
                    include: [],
                    useBuiltIns: false
                  }
                ]
              ],
              plugins: ['@babel/plugin-syntax-dynamic-import']
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              loaders: {
                css: [
                  MiniCssExtractPlugin.loader,
                  'css-loader',
                  'vue-style-loader'
                ],
                sass: [
                  MiniCssExtractPlugin.loader,
                  'css-loader',
                  'sass-loader',
                  'vue-style-loader'
                ],
                scss: [
                  MiniCssExtractPlugin.loader,
                  'css-loader',
                  'sass-loader',
                  'vue-style-loader'
                ],
                js: {
                  loader: 'babel-loader',
                  // exclude: /(node_modules)/,
                  options: {
                    presets: [
                      [
                        '@babel/preset-env',
                        {
                          targets: {
                            browsers: ['Android >= 4.0', 'ios >= 6']
                          },
                          debug: true,
                          include: [],
                          useBuiltIns: false
                        }
                      ]
                    ],
                    plugins: ['@babel/plugin-syntax-dynamic-import']
                  }
                }
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.sass$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new VueSSRClientPlugin(),
    new webpack.ProgressPlugin(),
    new webpack.DefinePlugin({
      'process.env.buildTime': JSON.stringify(Date.now())
    }),
    new webpack.EnvironmentPlugin(['NODE_ENV']),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DllReferencePlugin({
      manifest: require(`${pathConfig.dll}/vendor.json`)
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    }),
    new CleanWebpackPlugin(
      ['dist', 'static'], // glob 匹配
      {
        root: pathConfig.root, // 根目录
        exclude: ['favicon.ico', 'vue-ssr-server-bundle.json'], // 不包含
        verbose: true, // 开启输出
        dry: false // 启动删除文件
      }
    )
    // new webpack.SourceMapDevToolPlugin({
    //   filename: 'js/[name].js.map',
    //   exclude: ['vendor.js']
    // })
  ],
  optimization: {
    minimizer: [
      new ParallelUglifyPlugin({
        uglifyES: {
          compress: {
            warnings: false,
            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 中打印信息
      })
    ]
  },
  performance: {
    hints: false
  },
  stats: {
    colors: true,
    modules: false,
    children: false,
    chunks: false
  },
  devtool: 'false'
}

module.exports = { webpackConfig }