编译相关问题

你可以在quicktvui-playground 上查看示例。

编译资源

Vue Loader 官方文档

一、使用 url-loader 编译

webpack.android.js配置示例如下：

module.exports = {
	module: {
		rules: [
			{
				test: /\.(png|jpe?g|gif)$/i,
				use: [{
					loader: 'url-loader',
					options: {
						limit: true,
					},
				}],
			}
		]
	}
}

二、使用 file-loader 编译

webpack.android.js配置示例如下：

module.exports = {
	output: {
		//
		//资源命名规则
		assetModuleFilename: '[hash][ext][query]'
	},
	module: {
		rules: [
			{
				test: /\.(png|jpe?g|gif)$/i,
				type: 'asset/resource',
				generator: {
					outputPath: 'assets/',
					publicPath: 'assets/',
				}
			}
		]
	}
}

编译分包

webpack.android.js配置示例如下：

const ESDynamicImportPlugin = require('@extscreen/es3-dynamic-import-plugin');
module.exports = {
	output: {
		//公共路径
		publicPath: './',
	},
	plugins: [
		new ESDynamicImportPlugin(),
	],
	optimization: {
		splitChunks: {
			chunks: 'all',
			minSize: 20000,
			minRemainingSize: 0,
			minChunks: 1,
			maxAsyncRequests: 30,
			maxInitialRequests: 30,
			enforceSizeThreshold: 50000,
			cacheGroups: {
				defaultVendors: {
					test: /[\\/]node_modules[\\/]/,
					priority: -10,
					reuseExistingChunk: true,
					//注意: 必须命名为"vendor.android.js"
					filename: "vendor.android.js"
				},
				default: {
					minChunks: 2,
					priority: -20,
					reuseExistingChunk: true,
				},
			},
		},
	},
}

编译混淆

webpack.android.js配置示例如下：

const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
	plugins: [
		new WebpackObfuscator({
			rotateStringArray: true
		}, [''])
	],
	optimization: {
		moduleIds: 'named',
		minimize: true,
		minimizer: [new TerserPlugin({
			parallel: true,
			terserOptions: {
				output: {
					// 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
					beautify: false,
					// 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
					comments: false
				},
				compress: {
					warnings: false,
					drop_debugger: true,
					drop_console: true,
					pure_funcs: ['console.log']
				},
			},
			extractComments: false,
		})]
	}
}