You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

220 lines
6.1 KiB
JavaScript

6 months ago
'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