dmp-cli/webpack.buildChart.config.js

Dmp component's cli

const path = require('path')
const webpack = require('webpack')
const VueLoaderOptionsPlugin = require('vue-loader-options-plugin')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

const resolve = _path => path.resolve(__dirname, `${_path}`)

const dllManifestDir = path.resolve(__dirname, './build/manifest/prod')

const webpackConfig = {
  mode: 'production',
  devtool: '#source-map',
  entry: null,
  output: {
    filename: '[name]-[chunkhash:8].js',
    library: 'chart_[name]',
    libraryTarget: 'umd'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.vue', '.json'],
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
  },
  resolveLoader: {
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
  },
  externals: {
    'dmp-chart-sdk': 'DmpChartSDK'
  },
  module: {
    noParse: /package-lock|\.eslintrc/,
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader?cacheDirectory=true',
        include: [resolve('src'), resolve('chartlibs')],
        exclude: [resolve('node_modules'), resolve('src/components/dmpsimulator')],
        options: {
          extends: path.resolve(__dirname, './.babelrc')
        }
      },
      {
        test: /\.(png|jpe?g|gif|ico)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 8192,
          name: 'images/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 8192,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /^(.*\.module).*\.less/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[local]--[hash:base64:5]',
            }
          },
          {
            loader: 'less-loader',
            options: {
              importLoaders: 2,
              modules: true,
              localIdentName: '[local]--[hash:base64:5]',
            },
          },
        ]
      },
      {
        test: /^(?!.*\.module).*\.less/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          safe: true,
          discardComments: {
            removeAll: true
          }
        }
      })
    ]
  },
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new VueLoaderOptionsPlugin({
      babel: {
        extends: path.resolve(__dirname, './.babelrc')
      }
    }),
    new LodashModuleReplacementPlugin(),
    new MomentLocalesPlugin({
      localesToKeep: ['en-gb', 'zh-cn', 'es-us', 'ru']
    }),
    new webpack.DllReferencePlugin({
      context: dllManifestDir,
      manifest: require(path.join(dllManifestDir, 'vendor-manifest.json'))
    }),
    new webpack.DllReferencePlugin({
      context: dllManifestDir,
      manifest: require(path.join(dllManifestDir, 'echarts-manifest.json'))
    }),
    new webpack.DllReferencePlugin({
      context: dllManifestDir,
      manifest: require(path.join(dllManifestDir, 'f2-manifest.json'))
    }),
    new webpack.DllReferencePlugin({
      context: dllManifestDir,
      manifest: require(path.join(dllManifestDir, 'd3-manifest.json'))
    }),
    new MiniCssExtractPlugin({
      filename: '[name]-[chunkhash:8].min.css',
    })
  ]
}

module.exports = webpackConfig