tqv-data-operation-screen/config/webpack.prod.js

/* eslint-disable no-undef */
const webpack = require('webpack');
const { merge } = require("webpack-merge");
const path = require("path");
const common = require("./webpack.common.js");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // js压缩插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
//转换 less 变量,用于主题
const baseLess = lessToJs(fs.readFileSync(path.join(__dirname, '../src/themes/themes.less'), 'utf8'));
let themers = {};
Object.keys(baseLess).map((k, i) => {
  let key = String(k).replace(/@/g, "");
  themers[key] = String(baseLess[k]);
});
const lessVars = Object.assign(themers, { "@CDN_BASE": "" });
const lessExclude = /(node_modules)|(App)/;

module.exports = merge(common, {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.less$/,
        exclude: lessExclude,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: "[local]___[hash:base64:5]"
              }
            },
          },
          {
            loader: "less-loader",
            options: {
              modifyVars: lessVars,
              javascriptEnabled: true
            }
          }
        ],
      },
      {
        test: /\.less$/,
        include: lessExclude,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "less-loader",
            options: {
              modifyVars: lessVars,
              javascriptEnabled: true
            }
          }
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
        exclude: /(node_modules)/
      },
      // style
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'],
        exclude: /(src)/
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: ['url-loader?limit=10000&mimetype=images/svg+xml']
      },
      {
        test: /\.(less|css)$/,
        use: ['style-loader', 'css-loader'],
        include: [
          path.resolve(__dirname, './node_modules/monaco-editor/'),
          path.resolve(__dirname, './node_modules/bravo-editor/'),
        ]
      },
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[contenthash].css",
      chunkFilename: "static/css/[id].[contenthash].css",
      ignoreOrder: true
    }),
    // gzip压缩插件
    new CompressionPlugin({
      filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
      algorithm: 'gzip',//算法
      test: new RegExp(
        '\\.(js|css)$'    //压缩 js 与 css
      ),
      threshold: 10240,//只处理比这个值大的资源。按字节计算
      minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
    }),
    new webpack.DllReferencePlugin({
      manifest: require(path.resolve(__dirname, '../dist/manifest.json')),
    }),
    new webpack.DefinePlugin({
      'process.env.APP_ENV': JSON.stringify(process.env.APP_ENV),
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      
    }),
    new CopyWebpackPlugin([
      { 
        from: path.resolve(__dirname, '../src/assets/js/privateConfig.js'), 
        to:path.resolve(__dirname, '../dist/static/privateConfig.js'),
        // to: '../dist/static/privateConfig.js' 
      },
      { 
        from: path.resolve(__dirname, '../src/assets/js/crypto-js.js'), 
        to:path.resolve(__dirname, '../dist/static/crypto-js.js'),
        // to: '../dist/static/crypto-js.js' 
      },
    ]),
    new MonacoWebpackPlugin()
  ],
});