123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219 |
- 'use strict'
- const IsWeb = process.env.BUILD_TARGET === 'web'
- process.env.BABEL_ENV = IsWeb ? 'web' : 'renderer'
- const path = require('path')
- const { dependencies } = require('../package.json')
- const webpack = require('webpack')
- const config = require('../config')
- const { styleLoaders } = require('./utils')
- const CopyWebpackPlugin = require('copy-webpack-plugin')
- const MiniCssExtractPlugin = require('mini-css-extract-plugin')
- const HtmlWebpackPlugin = require('html-webpack-plugin')
- const TerserPlugin = require('terser-webpack-plugin')
- // const ESLintPlugin = require('eslint-webpack-plugin');
- const { VueLoaderPlugin } = require('vue-loader')
- const { getConfig } = require("./utils")
- function resolve(dir) {
- return path.join(__dirname, '..', dir)
- }
- /**
- * List of node_modules to include in webpack bundle
- *
- * Required for specific packages like Vue UI libraries
- * that provide pure *.vue files that need compiling
- * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
- */
- let rendererConfig = {
- entry: IsWeb ? { web: path.join(__dirname, '../src/renderer/main.js') } : { renderer: resolve('src/renderer/main.js') },
- infrastructureLogging: { level: 'warn' },
- stats: 'none',
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: "vue-loader",
- options: {
- babelParserPlugins: [
- 'jsx',
- 'classProperties',
- 'decorators-legacy'
- ]
- }
- },
- {
- test: /\.jsx$/,
- loader: 'babel-loader',
- },
- {
- test: /\.html$/,
- use: 'vue-html-loader'
- },
- {
- test: /\.svg$/,
- loader: 'svg-sprite-loader',
- include: [resolve('src/renderer/icons')],
- options: {
- symbolId: 'icon-[name]'
- }
- },
- {
- test: /\.(png|jpe?g|gif)(\?.*)?$/,
- type: "asset/resource",
- generator: {
- filename: 'imgs/[name]--[hash].[ext]'
- }
- },
- {
- test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
- type: "asset/resource",
- generator: {
- filename: 'media/[name]--[hash].[ext]'
- }
- },
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- type: "asset/resource",
- generator: {
- filename: 'fonts/[name]--[hash].[ext]'
- }
- }
- ]
- },
- node: {
- __dirname: process.env.NODE_ENV !== 'production',
- __filename: process.env.NODE_ENV !== 'production'
- },
- plugins: [
- new VueLoaderPlugin(),
- new MiniCssExtractPlugin(),
- new webpack.DefinePlugin({
- 'process.env.userConfig': JSON.stringify(getConfig),
- 'process.env.IS_WEB': IsWeb
- }),
- new HtmlWebpackPlugin({
- filename: 'index.html',
- template: resolve('src/index.ejs'),
- minify: {
- collapseWhitespace: true,
- removeAttributeQuotes: true,
- removeComments: true,
- minifyJS: true,
- minifyCSS: true
- },
- templateParameters(compilation, assets, options) {
- return {
- compilation: compilation,
- webpack: compilation.getStats().toJson(),
- webpackConfig: compilation.options,
- htmlWebpackPlugin: {
- files: assets,
- options: options
- },
- process,
- };
- },
- nodeModules: false
- }),
- ],
- output: {
- filename: '[name].js',
- path: IsWeb ? path.join(__dirname, '../dist/web') : path.join(__dirname, '../dist/electron')
- },
- resolve: {
- alias: {
- '@': resolve('src/renderer'),
- 'vue$': 'vue/dist/vue.esm.js'
- },
- extensions: ['.js', '.vue', '.json', '.css', '.node']
- },
- target: IsWeb ? 'web' : 'electron-renderer'
- }
- // 将css相关得loader抽取出来
- rendererConfig.module.rules = rendererConfig.module.rules.concat(styleLoaders({ sourceMap: process.env.NODE_ENV !== 'production' ? config.dev.cssSourceMap : false, extract: IsWeb, minifyCss: process.env.NODE_ENV === 'production' }));
- (IsWeb || config.UseJsx) ? rendererConfig.module.rules.push({ test: /\.m?[jt]sx$/, use: [{ loader: 'babel-loader', options: { cacheDirectory: true } }] }) : rendererConfig.module.rules.push({ test: /\.m?[jt]s$/, loader: 'esbuild-loader', options: { loader: 'ts', } })
- /**
- * Adjust rendererConfig for development settings
- */
- if (process.env.NODE_ENV !== 'production' && !IsWeb) {
- rendererConfig.plugins.push(
- new webpack.DefinePlugin({
- __lib: `"${path.join(__dirname, `../${config.DllFolder}`).replace(/\\/g, '\\\\')}"`
- })
- )
- }
- /**
- * Adjust rendererConfig for production settings
- */
- if (process.env.NODE_ENV === 'production') {
- rendererConfig.plugins.push(
- new CopyWebpackPlugin({
- patterns: [
- {
- from: path.join(__dirname, '../static'),
- to: path.join(__dirname, '../dist/electron/static'),
- globOptions: {
- ignore: ['.*']
- }
- }
- ]
- }),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"',
- }),
- new webpack.LoaderOptionsPlugin({
- minimize: true
- })
- )
- rendererConfig.optimization = {
- minimize: true,
- minimizer: [
- new TerserPlugin({
- terserOptions: {
- compress: {
- drop_console: true,
- drop_debugger: true,
- pure_funcs: ["console.log", "console.warn"]
- }
- }
- })
- ]
- }
- rendererConfig.optimization.splitChunks = {
- chunks: "async",
- cacheGroups: {
- vendor: { // 将第三方模块提取出来
- minSize: 30000,
- minChunks: 1,
- test: /node_modules/,
- chunks: 'initial',
- name: 'vendor',
- priority: 1
- },
- commons: {
- test: /[\\/]src[\\/]common[\\/]/,
- name: 'commons',
- minSize: 30000,
- minChunks: 3,
- chunks: 'initial',
- priority: -1,
- reuseExistingChunk: true // 这个配置允许我们使用已经存在的代码块
- }
- }
- }
- rendererConfig.optimization.runtimeChunk = { name: 'runtime' }
- } else {
- rendererConfig.devtool = 'eval-source-map'
- // eslint
- // rendererConfig.plugins.push(new ESLintPlugin(config.dev.ESLintoptions))
- }
- module.exports = rendererConfig
|