初始提交

build-config/css-loader.config.js

@@ -0,0 +1,8 @@
+const isDev = process.env.NODE_ENV === 'development'
+
+module.exports = {
+  modules: {
+    localIdentName: isDev ? '[folder]-[name]--[local]--[hash:base64:5]' : '[hash:base64:5]',
+  },
+  localsConvention: 'camelCase',
+}

build-config/main/webpack.config.base.js

@@ -0,0 +1,44 @@
+const path = require('path')
+
+module.exports = {
+  target: 'electron-main',
+  output: {
+    filename: '[name].js',
+    libraryTarget: 'commonjs2',
+    path: path.join(__dirname, '../../dist/electron'),
+  },
+  externals: [
+    // suppress electron-debug warning
+    // see https://github.com/SimulatedGREG/electron-vue/issues/498
+    { 'electron-debug': 'electron-debug' },
+  ],
+  resolve: {
+    alias: {
+      common: path.join(__dirname, '../../src/common'),
+    },
+    extensions: ['*', '.js', '.json', '.node'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-formatter-friendly'),
+          },
+        },
+        exclude: /node_modules/,
+        enforce: 'pre',
+      },
+      // {
+      //   test: /\.js$/,
+      //   loader: 'babel-loader',
+      //   exclude: /node_modules/,
+      // },
+    ],
+  },
+  performance: {
+    maxEntrypointSize: 300000,
+  },
+}

build-config/main/webpack.config.dev.js

@@ -0,0 +1,22 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const webpack = require('webpack')
+
+const baseConfig = require('./webpack.config.base')
+
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  entry: {
+    main: path.join(__dirname, '../../src/main/index.dev.js'),
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"development"',
+      },
+      __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+    }),
+    new webpack.NoEmitOnErrorsPlugin(),
+  ],
+})

build-config/main/webpack.config.prod.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const webpack = require('webpack')
+
+const baseConfig = require('./webpack.config.base')
+
+const { dependencies } = require('../../package.json')
+
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  entry: {
+    main: path.join(__dirname, '../../src/main/index.js'),
+  },
+  externals: [
+    ...Object.keys(dependencies || {}),
+  ],
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+  ],
+})

build-config/pack.js

@@ -0,0 +1,84 @@
+process.env.NODE_ENV = 'production'
+
+const chalk = require('chalk')
+const del = require('del')
+const webpack = require('webpack')
+const Multispinner = require('multispinner')
+
+const mainConfig = require('./main/webpack.config.prod')
+const rendererConfig = require('./renderer/webpack.config.prod')
+
+const errorLog = chalk.bgRed.white(' ERROR ') + ' '
+const okayLog = chalk.bgGreen.white(' OKAY ') + ' '
+
+
+function build() {
+  del.sync(['dist/electron', 'build'])
+
+  const tasks = ['main', 'renderer']
+  const m = new Multispinner(tasks, {
+    preText: 'building',
+    postText: 'process',
+  })
+
+  let results = ''
+
+  m.on('success', () => {
+    process.stdout.write('\x1B[2J\x1B[0f')
+    console.log(`\n\n${results}`)
+    console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
+    process.exit()
+  })
+
+  pack(mainConfig).then(result => {
+    results += result + '\n\n'
+    m.success('main')
+  }).catch(err => {
+    m.error('main')
+    console.log(`\n  ${errorLog}failed to build main process`)
+    console.error(`\n${err}\n`)
+    process.exit(1)
+  })
+
+  pack(rendererConfig).then(result => {
+    results += result + '\n\n'
+    m.success('renderer')
+  }).catch(err => {
+    m.error('renderer')
+    console.log(`\n  ${errorLog}failed to build renderer process`)
+    console.error(`\n${err}\n`)
+    process.exit(1)
+  })
+}
+
+function pack(config) {
+  return new Promise((resolve, reject) => {
+    config.mode = 'production'
+    webpack(config, (err, stats) => {
+      if (err) reject(err.stack || err)
+      else if (stats.hasErrors()) {
+        let err = ''
+
+        stats.toString({
+          chunks: false,
+          modules: false,
+          colors: true,
+        })
+          .split(/\r?\n/)
+          .forEach(line => {
+            err += `    ${line}\n`
+          })
+
+        reject(err)
+      } else {
+        resolve(stats.toString({
+          chunks: false,
+          colors: true,
+        }))
+      }
+    })
+  })
+}
+
+build()
+

build-config/renderer/webpack.config.base.js

@@ -0,0 +1,102 @@
+const path = require('path')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const HTMLPlugin = require('html-webpack-plugin')
+
+const vueLoaderConfig = require('../vue-loader.config')
+
+
+module.exports = {
+  target: 'electron-renderer',
+  entry: {
+    renderer: path.join(__dirname, '../../src/renderer/main.js'),
+  },
+  output: {
+    filename: '[name].js',
+    libraryTarget: 'commonjs2',
+    path: path.join(__dirname, '../../dist/electron'),
+    publicPath: './',
+  },
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, '../../src/renderer'),
+      common: path.join(__dirname, '../../src/common'),
+    },
+    extensions: ['*', '.js', '.json', '.vue', '.node'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(vue|js)$/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-formatter-friendly'),
+          },
+        },
+        exclude: /node_modules/,
+        enforce: 'pre',
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig,
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.pug$/,
+        oneOf: [
+          // Use pug-plain-loader handle .vue file
+          {
+            resourceQuery: /vue/,
+            use: ['pug-plain-loader'],
+          },
+          // Use pug-loader handle .pug file
+          {
+            use: ['pug-loader'],
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'imgs/[name]--[folder].[ext]',
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'media/[name]--[folder].[ext]',
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'fonts/[name]--[folder].[ext]',
+        },
+      },
+    ],
+  },
+  performance: {
+    maxEntrypointSize: 300000,
+  },
+  plugins: [
+    new HTMLPlugin({
+      filename: 'index.html',
+      template: path.join(__dirname, '../../src/index.pug'),
+      isProd: process.env.NODE_ENV == 'production',
+      browser: process.browser,
+      __dirname,
+    }),
+    new VueLoaderPlugin(),
+  ],
+}

build-config/renderer/webpack.config.dev.js

@@ -0,0 +1,56 @@
+const path = require('path')
+const webpack = require('webpack')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+const merge = require('webpack-merge')
+
+const baseConfig = require('./webpack.config.base')
+
+const { mergeCSSLoaderDev } = require('../utils')
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  devtool: '#cheap-module-eval-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoaderDev(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoaderDev({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+      {
+        test: /\.styl(:?us)?$/,
+        oneOf: mergeCSSLoaderDev({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+    ],
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new FriendlyErrorsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"development"',
+        ELECTRON_DISABLE_SECURITY_WARNINGS: 'true',
+      },
+      '__static': `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+    }),
+  ],
+  performance: {
+    hints: false,
+  },
+})
+

build-config/renderer/webpack.config.prod.js

@@ -0,0 +1,86 @@
+const path = require('path')
+const webpack = require('webpack')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const merge = require('webpack-merge')
+
+const baseConfig = require('./webpack.config.base')
+
+const { mergeCSSLoaderProd } = require('../utils')
+const { dependencies } = require('../../package.json')
+
+let whiteListedModules = ['vue']
+
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  devtool: false,
+  externals: [
+    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoaderProd(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoaderProd({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+      {
+        test: /\.styl(:?us)?$/,
+        oneOf: mergeCSSLoaderProd({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+    ],
+  },
+  plugins: [
+    new CopyWebpackPlugin([
+      {
+        from: path.join(__dirname, '../../src/static'),
+        to: path.join(__dirname, '../../dist/electron/static'),
+        ignore: ['.*'],
+      },
+    ]),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new webpack.NamedChunksPlugin(),
+  ],
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: false, // set to true if you want JS source maps
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  performance: {
+    hints: 'warning',
+  },
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+})
+
+

build-config/runner-dev.js

@@ -0,0 +1,170 @@
+process.env.NODE_ENV = 'development'
+
+const chalk = require('chalk')
+const electron = require('electron')
+const path = require('path')
+// const { say } = require('cfonts')
+const { spawn } = require('child_process')
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const webpackHotMiddleware = require('webpack-hot-middleware')
+
+const mainConfig = require('./main/webpack.config.dev')
+const rendererConfig = require('./renderer/webpack.config.dev')
+
+const { logStats } = require('./utils')
+
+let electronProcess = null
+let manualRestart = false
+let hotMiddleware
+
+
+function startRenderer() {
+  return new Promise((resolve, reject) => {
+    // rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
+    // rendererConfig.mode = 'development'
+    const compiler = webpack(rendererConfig)
+    hotMiddleware = webpackHotMiddleware(compiler, {
+      log: false,
+      heartbeat: 2500,
+    })
+
+    compiler.hooks.compilation.tap('compilation', compilation => {
+      // console.log(Object.keys(compilation.hooks))
+      compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
+        hotMiddleware.publish({ action: 'reload' })
+        cb()
+      })
+    })
+
+    compiler.hooks.done.tap('done', stats => {
+      // logStats('Renderer', 'Compile done')
+      // logStats('Renderer', stats)
+    })
+
+    const server = new WebpackDevServer(
+      compiler,
+      {
+        contentBase: path.join(__dirname, '../'),
+        quiet: true,
+        hot: true,
+        historyApiFallback: true,
+        clientLogLevel: 'warning',
+        overlay: {
+          errors: true,
+        },
+        before(app, ctx) {
+          app.use(hotMiddleware)
+          ctx.middleware.waitUntilValid(() => {
+            resolve()
+          })
+        },
+      }
+    )
+
+    server.listen(9080)
+  })
+}
+
+function startMain() {
+  return new Promise((resolve, reject) => {
+    // mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
+    // mainConfig.mode = 'development'
+    const compiler = webpack(mainConfig)
+
+    compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
+      logStats('Main', chalk.white.bold('compiling...'))
+      hotMiddleware.publish({ action: 'compiling' })
+      done()
+    })
+
+    compiler.watch({}, (err, stats) => {
+      if (err) {
+        console.log(err)
+        return
+      }
+
+      // logStats('Main', stats)
+
+      if (electronProcess && electronProcess.kill) {
+        manualRestart = true
+        process.kill(electronProcess.pid)
+        electronProcess = null
+        startElectron()
+
+        setTimeout(() => {
+          manualRestart = false
+        }, 5000)
+      }
+
+      resolve()
+    })
+  })
+}
+
+function startElectron() {
+  let args = [
+    '--inspect=5858',
+    // 'NODE_ENV=development',
+    path.join(__dirname, '../dist/electron/main.js'),
+  ]
+
+  // detect yarn or npm and process commandline args accordingly
+  if (process.env.npm_execpath.endsWith('yarn.js')) {
+    args = args.concat(process.argv.slice(3))
+  } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
+    args = args.concat(process.argv.slice(2))
+  }
+
+  electronProcess = spawn(electron, args)
+
+  electronProcess.stdout.on('data', data => {
+    electronLog(data, 'blue')
+  })
+  electronProcess.stderr.on('data', data => {
+    electronLog(data, 'red')
+  })
+
+  electronProcess.on('close', () => {
+    if (!manualRestart) process.exit()
+  })
+}
+
+function electronLog(data, color) {
+  let log = data.toString()
+  if (/[0-9A-z]+/.test(log)) {
+    console.log(chalk[color](log))
+  }
+}
+
+function greeting() {
+/*   const cols = process.stdout.columns
+  let text = ''
+
+  if (cols > 104) text = 'electron-vue'
+  else if (cols > 76) text = 'electron-|vue'
+  else text = false
+
+  if (text) {
+    say(text, {
+      colors: ['yellow'],
+      font: 'simple3d',
+      space: false,
+    })
+  } else console.log(chalk.yellow.bold('\n  electron-vue')) */
+  console.log(chalk.blue('getting ready...') + '\n')
+}
+
+function init() {
+  greeting()
+
+  Promise.all([startRenderer(), startMain()])
+    .then(() => {
+      startElectron()
+    })
+    .catch(err => {
+      console.error(err)
+    })
+}
+
+init()

build-config/utils.js

@@ -0,0 +1,103 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const cssLoaderConfig = require('./css-loader.config')
+const chalk = require('chalk')
+
+// merge css-loader in development
+exports.mergeCSSLoaderDev = beforeLoader => {
+  const loader = [
+    // 这里匹配 `<style module>`
+    {
+      resourceQuery: /module/,
+      use: [
+        'vue-style-loader',
+        {
+          loader: 'css-loader',
+          options: Object.assign({
+            sourceMap: true,
+          }, cssLoaderConfig),
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
+    },
+    // 这里匹配普通的 `<style>` 或 `<style scoped>`
+    {
+      use: [
+        'vue-style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: true,
+          },
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
+    },
+  ]
+  if (beforeLoader) {
+    loader[0].use.push(beforeLoader)
+    loader[1].use.push(beforeLoader)
+  }
+  return loader
+}
+
+// merge css-loader in production
+exports.mergeCSSLoaderProd = beforeLoader => {
+  const loader = [
+    // 这里匹配 `<style module>`
+    {
+      resourceQuery: /module/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: cssLoaderConfig,
+        },
+        'postcss-loader',
+      ],
+    },
+    // 这里匹配普通的 `<style>` 或 `<style scoped>`
+    {
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+        'postcss-loader',
+      ],
+    },
+  ]
+  if (beforeLoader) {
+    loader[0].use.push(beforeLoader)
+    loader[1].use.push(beforeLoader)
+  }
+  return loader
+}
+
+exports.logStats = (proc, data) => {
+  let log = ''
+
+  log += chalk.yellow.bold(`${proc} Process：`)
+  log += '\n'
+
+  if (typeof data === 'object') {
+    data.toString({
+      colors: true,
+      chunks: false,
+    }).split(/\r?\n/).forEach(line => {
+      log += '  ' + line + '\n'
+    })
+  } else {
+    log += `  ${data}\n`
+  }
+
+  console.log(log)
+}
+

build-config/vue-loader.config.js

@@ -0,0 +1,12 @@
+const isDev = process.env.NODE_ENV === 'development'
+
+module.exports = {
+  // preserveWhitepace: true,
+  compilerOptions: {
+    whitespace: 'preserve',
+  },
+  extractCSS: !isDev,
+  // cssModules: {
+  //   localIndetName: '',
+  // },
+}

build-config/web/webpack.config.base.js

@@ -0,0 +1,97 @@
+const path = require('path')
+const webpack = require('webpack')
+const HTMLPlugin = require('html-webpack-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+const vueLoaderConfig = require('../vue-loader.config')
+
+module.exports = {
+  target: 'web',
+  entry: path.join(__dirname, '../../src/renderer/main.js'),
+  output: {
+    path: path.join(__dirname, '../../dist/web'),
+  },
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, '../../src/renderer'),
+      common: path.join(__dirname, '../../src/common'),
+    },
+    extensions: ['*', '.js', '.vue', '.json', '.css'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(vue|js)$/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-formatter-friendly'),
+          },
+        },
+        exclude: /node_modules/,
+        enforce: 'pre',
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig,
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.pug$/,
+        oneOf: [
+          // Use pug-plain-loader handle .vue file
+          {
+            resourceQuery: /vue/,
+            use: ['pug-plain-loader'],
+          },
+          // Use pug-loader handle .pug file
+          {
+            use: ['pug-loader'],
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: 'imgs/[name].[ext]',
+          },
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: 'fonts/[name].[ext]',
+          },
+        },
+      },
+    ],
+  },
+  performance: {
+    maxEntrypointSize: 300000,
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HTMLPlugin({
+      filename: 'index.html',
+      template: path.resolve(__dirname, '../../src/index.pug'),
+      nodeModules: false,
+      isProd: process.env.NODE_ENV == 'production',
+      browser: process.browser,
+      __dirname,
+    }),
+    new webpack.DefinePlugin({
+      'process.env.IS_WEB': 'true',
+    }),
+  ],
+}

build-config/web/webpack.config.dev.js

@@ -0,0 +1,57 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+const baseConfig = require('./webpack.config.base')
+
+const { mergeCSSLoaderDev } = require('../utils')
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  devtool: '#cheap-module-eval-source-map',
+  output: {
+    filename: '[name].js',
+    path: path.join(__dirname, '../../dist/web'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoaderDev(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoaderDev({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+      {
+        test: /\.styl$/,
+        oneOf: mergeCSSLoaderDev({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"development"',
+      },
+    }),
+    new FriendlyErrorsPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+  ],
+  performance: {
+    hints: false,
+  },
+})
+

build-config/web/webpack.config.prod.js

@@ -0,0 +1,94 @@
+const path = require('path')
+const webpack = require('webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const merge = require('webpack-merge')
+const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const baseConfig = require('./webpack.config.base')
+
+const { mergeCSSLoaderProd } = require('../utils')
+
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  devtool: false,
+  output: {
+    filename: '[name].[chunkhash:8].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoaderProd(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoaderProd({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+      {
+        test: /\.styl$/,
+        oneOf: mergeCSSLoaderProd({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+    ],
+  },
+  plugins: [
+    new CopyWebpackPlugin([
+      {
+        from: path.join(__dirname, '../../src/static'),
+        to: path.join(__dirname, '../dist/web/static'),
+        ignore: ['.*'],
+      },
+    ]),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[contentHash:8].css',
+    }),
+    new webpack.NamedChunksPlugin(),
+  ],
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: false, // set to true if you want JS source maps
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+    splitChunks: {
+      cacheGroups: {
+        // chunks: 'all',
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          enforce: true,
+          chunks: 'all',
+        },
+        styles: {
+          name: 'styles',
+          test: /\.(css|less)$/,
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+    runtimeChunk: true,
+  },
+  performance: {
+    hints: 'warning',
+  },
+})